787 lines
38 KiB
HTML
787 lines
38 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=20260410-110">
|
|
<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; /* #f3efe9 — warm cream base */
|
|
--surface-rgb: 255, 255, 255; /* #ffffff — white panels (existing tokens) */
|
|
--surface-soft-rgb: 249, 245, 238; /* #f9f5ee */
|
|
--surface-strong-rgb: 235, 229, 220; /* #ebe5dc */
|
|
--line-rgb: 69, 58, 48; /* #453a30 — divider base (warm brown) */
|
|
--text-primary-rgb: 28, 24, 21; /* #1c1815 */
|
|
--text-secondary-rgb: 102, 92, 83; /* #665c53 */
|
|
--text-tertiary-rgb: 140, 130, 118; /* #8c8276 */
|
|
--warm-rgb: 183, 142, 88; /* #b78e58 — caramel */
|
|
--success-rgb: 47, 133, 82; /* #2f8552 — deep emerald (AA on white) */
|
|
--danger-rgb: 187, 75, 75; /* #bb4b4b — deep rose (AA on white) */
|
|
--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: transparent;
|
|
--highlight-bottom: transparent;
|
|
|
|
/* Extended light palette — mirrors dark hierarchy: sunken < app-bg < card. */
|
|
--card-rgb: 255, 255, 255; /* #ffffff — primary elevated card (raised via shadow) */
|
|
--card-soft-rgb: 239, 233, 221; /* #efe9dd — nested/medium surface on white */
|
|
--card-strong-rgb: 228, 219, 205; /* #e4dbcd — strong surface / stroke */
|
|
--card-raised-rgb: 252, 249, 242; /* #fcf9f2 — subtle raise (chip on card) */
|
|
--sunken-rgb: 235, 229, 217; /* #ebe5d9 — deep inputs / search shell */
|
|
--sunken-deep-rgb: 219, 211, 196; /* #dbd3c4 — deepest well */
|
|
--border-card-rgb: 224, 215, 200; /* #e0d7c8 — subtle card/dock border */
|
|
--border-input-rgb: 180, 168, 150; /* #b4a896 — input / active border */
|
|
--text-emphasis-rgb: 14, 12, 10; /* #0e0c0a — brightest interactive text */
|
|
--text-body-rgb: 48, 40, 33; /* #302821 — primary body text (most common) */
|
|
--text-body-soft-rgb: 72, 62, 52; /* #483e34 — body soft */
|
|
--text-muted-rgb: 102, 92, 83; /* #665c53 — muted (matches --text-secondary) */
|
|
--text-dim-rgb: 140, 130, 118; /* #8c8276 — dim / placeholder */
|
|
--text-faint-rgb: 156, 146, 137; /* #9c9289 — faint icon color */
|
|
--text-subdued-rgb: 176, 166, 154; /* #b0a69a — subdued */
|
|
--skeleton-rgb: 226, 220, 210; /* #e2dcd2 — image loading placeholder */
|
|
--on-accent-rgb: 255, 255, 255; /* white text on accent backgrounds */
|
|
--overlay-rgb: 24, 17, 11; /* #18110b — scrim / shadow base (warm brown-black) */
|
|
--shadow-card: 0 2px 8px rgba(24, 17, 11, 0.08);
|
|
--shadow-shell: 0 5px 10px rgba(24, 17, 11, 0.08), 0 14px 22px rgba(24, 17, 11, 0.12), 0 22px 34px rgba(24, 17, 11, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
--icon-watermark: rgba(24, 17, 11, 0.08);
|
|
--hover-overlay: rgba(24, 17, 11, 0.05);
|
|
}
|
|
|
|
.dark {
|
|
color-scheme: dark;
|
|
--app-bg-rgb: 45, 46, 43; /* #2d2e2b */
|
|
--surface-rgb: 37, 35, 33; /* panel/input backgrounds (existing tokens) */
|
|
--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; /* #b7ada1 */
|
|
--text-tertiary-rgb: 129, 121, 112;
|
|
--warm-rgb: 198, 156, 101;
|
|
--success-rgb: 110, 231, 183; /* #6ee7b7 — unified success green */
|
|
--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;
|
|
|
|
/* Extended dark palette — distinct shades used across cards, dock, pickers, inputs. */
|
|
--card-rgb: 57, 57, 55; /* #393937 — primary elevated card */
|
|
--card-soft-rgb: 47, 47, 45; /* #2f2f2d — medium card */
|
|
--card-strong-rgb: 68, 68, 66; /* #444442 — strong card / stroke */
|
|
--card-raised-rgb: 58, 58, 55; /* #3a3a37 — slight raise above card */
|
|
--sunken-rgb: 35, 34, 30; /* #23221e — deep inputs / search shell */
|
|
--sunken-deep-rgb: 22, 21, 19; /* #161513 — deepest well */
|
|
--border-card-rgb: 65, 66, 63; /* #41423f — dock/picker borders */
|
|
--border-input-rgb: 120, 120, 118; /* #787876 — input / active borders */
|
|
--text-emphasis-rgb: 242, 239, 232; /* #f2efe8 — brightest interactive text */
|
|
--text-body-rgb: 221, 214, 202; /* #ddd6ca — primary body text (most common) */
|
|
--text-body-soft-rgb: 215, 210, 200; /* #d7d2c8 — body soft */
|
|
--text-muted-rgb: 183, 173, 161; /* #b7ada1 — muted (matches --text-secondary) */
|
|
--text-dim-rgb: 155, 151, 143; /* #9b978f — dim / placeholder */
|
|
--text-faint-rgb: 143, 139, 132; /* #8f8b84 — faint icon color */
|
|
--text-subdued-rgb: 109, 108, 103; /* #6d6c67 — subdued */
|
|
--skeleton-rgb: 212, 212, 212; /* #d4d4d4 — image loading placeholder */
|
|
--on-accent-rgb: 26, 26, 26; /* #1a1a1a — text on bright accent backgrounds */
|
|
--overlay-rgb: 0, 0, 0; /* scrim / shadow base */
|
|
--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25);
|
|
--shadow-shell: 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);
|
|
--icon-watermark: rgba(255, 255, 255, 0.10);
|
|
--hover-overlay: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
* { 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(--text-body-rgb));
|
|
border: 2px solid rgba(var(--surface-rgb), 0.9);
|
|
box-shadow: 0 8px 20px rgba(var(--overlay-rgb), 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: rgb(var(--text-primary-rgb)) !important;
|
|
box-shadow: 0 2px 8px rgba(var(--overlay-rgb), 0.14) !important;
|
|
}
|
|
.dark .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(var(--overlay-rgb), 0.18) !important;
|
|
}
|
|
.border-gray-900 { border-color: rgba(var(--text-body-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(--text-body-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: rgb(var(--text-emphasis-rgb)) !important; }
|
|
.dark .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(--text-body-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(--text-body-rgb), 0.54) !important; }
|
|
.focus\:border-gray-300:focus { border-color: rgba(var(--text-body-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; }
|
|
.text-emerald-400 { color: rgb(var(--success-rgb)) !important; }
|
|
.text-emerald-300 { color: rgb(var(--success-rgb)) !important; }
|
|
.bg-emerald-400 { background-color: rgb(var(--success-rgb)) !important; }
|
|
.border-emerald-400\/40 { border-color: rgba(var(--success-rgb), 0.4) !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; }
|
|
.bg-red-400 { background-color: rgba(var(--danger-rgb), 0.82) !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; }
|
|
.border-red-300\/40 { border-color: rgba(var(--danger-rgb), 0.4) !important; }
|
|
.border-red-300\/30 { border-color: rgba(var(--danger-rgb), 0.3) !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; }
|
|
.text-red-300 { color: rgba(var(--danger-rgb), 0.66) !important; }
|
|
.hover\:text-red-500:hover { color: rgba(var(--danger-rgb), 0.9) !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,
|
|
#planner-picker-grid {
|
|
background: rgb(var(--app-bg-rgb)) !important;
|
|
}
|
|
#recipe-grid,
|
|
#planner-picker-grid {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 0.5rem !important;
|
|
align-items: stretch;
|
|
}
|
|
#planner-view,
|
|
#planner-view > div:first-child,
|
|
#planner-scroll,
|
|
#calendar-swipe-zone,
|
|
#calendar-week-wrap,
|
|
#calendar-month-wrap,
|
|
#planner-meal-slots {
|
|
background: rgb(var(--app-bg-rgb)) !important;
|
|
}
|
|
#main-view > div:first-child,
|
|
#planner-view > div:first-child,
|
|
#pantry-view > div:first-child {
|
|
background: rgb(var(--app-bg-rgb)) !important;
|
|
backdrop-filter: none;
|
|
}
|
|
|
|
/* Cards and sheets */
|
|
#recipe-grid > *,
|
|
#planner-picker-grid > * {
|
|
background: rgb(var(--card-rgb)) !important;
|
|
border: none !important;
|
|
border-radius: 1.75rem !important;
|
|
box-shadow: none !important;
|
|
transition: transform 180ms ease, box-shadow 180ms ease !important;
|
|
}
|
|
#recipe-grid > .recipe-list-card,
|
|
#planner-picker-grid > .recipe-list-card {
|
|
border-radius: 1.25rem !important;
|
|
height: 11.9rem;
|
|
}
|
|
#recipe-grid > .recipe-list-card .recipe-browser-card-media,
|
|
#planner-picker-grid > .recipe-list-card .recipe-browser-card-media {
|
|
height: 5.25rem;
|
|
}
|
|
#recipe-grid > .recipe-list-card .recipe-browser-card-body,
|
|
#planner-picker-grid > .recipe-list-card .recipe-browser-card-body {
|
|
padding: 0.58rem;
|
|
}
|
|
#recipe-grid > .recipe-list-card .recipe-browser-card-title,
|
|
#planner-picker-grid > .recipe-list-card .recipe-browser-card-title {
|
|
display: -webkit-box;
|
|
min-height: 2.76rem;
|
|
margin-bottom: 0.55rem;
|
|
font-size: 0.66rem;
|
|
font-weight: 400 !important;
|
|
line-height: 0.92rem;
|
|
overflow: hidden;
|
|
text-decoration: none !important;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
#recipe-grid > .recipe-list-card .recipe-browser-card-meta,
|
|
#planner-picker-grid > .recipe-list-card .recipe-browser-card-meta {
|
|
margin-bottom: 0.45rem;
|
|
gap: 0.2rem;
|
|
font-size: 0.58rem;
|
|
line-height: 0.78rem;
|
|
flex-wrap: nowrap;
|
|
}
|
|
#recipe-grid > .recipe-list-card .recipe-browser-card-meta > div,
|
|
#planner-picker-grid > .recipe-list-card .recipe-browser-card-meta > div {
|
|
min-width: 0;
|
|
white-space: nowrap;
|
|
}
|
|
#recipe-grid > .recipe-list-card .recipe-browser-card-meta i,
|
|
#planner-picker-grid > .recipe-list-card .recipe-browser-card-meta i {
|
|
font-size: 0.52rem;
|
|
}
|
|
#recipe-grid > .recipe-list-card .recipe-browser-card-labels,
|
|
#planner-picker-grid > .recipe-list-card .recipe-browser-card-labels {
|
|
gap: 0.25rem;
|
|
}
|
|
#recipe-grid > .recipe-list-card .recipe-browser-card-label,
|
|
#planner-picker-grid > .recipe-list-card .recipe-browser-card-label {
|
|
padding: 0.14rem 0.36rem;
|
|
font-size: 0.54rem;
|
|
line-height: 0.72rem;
|
|
}
|
|
#recipe-grid > *:hover,
|
|
#planner-picker-grid > *:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: none !important;
|
|
}
|
|
#recipe-grid > * img,
|
|
#planner-picker-grid > * img {
|
|
transition: transform 240ms ease;
|
|
}
|
|
#recipe-grid > *:hover img,
|
|
#planner-picker-grid > *:hover img {
|
|
transform: scale(1.04);
|
|
}
|
|
#recipe-grid > * > div:first-child::after,
|
|
#planner-picker-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-topbar #recipe-search-shell {
|
|
min-height: 0;
|
|
width: 100%;
|
|
margin-inline: 0;
|
|
isolation: auto;
|
|
}
|
|
#recipe-topbar #recipe-search-shell::after {
|
|
display: none;
|
|
}
|
|
#recipe-topbar #recipe-search-shell,
|
|
#recipe-topbar #recipe-search-shell:focus-within {
|
|
background: rgb(var(--sunken-rgb)) !important;
|
|
border: 1px solid rgb(var(--border-input-rgb)) !important;
|
|
backdrop-filter: none;
|
|
-webkit-backdrop-filter: none;
|
|
}
|
|
#recipe-topbar #recipe-search-input {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
background: transparent !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
color: rgb(var(--text-body-rgb)) !important;
|
|
caret-color: rgb(var(--text-body-rgb));
|
|
}
|
|
#recipe-topbar #recipe-search-input::placeholder {
|
|
color: rgb(var(--text-dim-rgb)) !important;
|
|
opacity: 1;
|
|
}
|
|
#recipe-topbar #recipe-filter-btn {
|
|
border-radius: 999px;
|
|
}
|
|
#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: rgb(var(--card-rgb)) !important;
|
|
border: 1px solid rgb(var(--border-card-rgb)) !important;
|
|
box-shadow:
|
|
var(--shadow-shell),
|
|
inset 0 2px 6px rgba(var(--overlay-rgb), 0.16),
|
|
inset 0 -1px 2px rgba(255, 255, 255, 0.02) !important;
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
}
|
|
#planner-picker-search-shell::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 11%;
|
|
right: 11%;
|
|
bottom: -0.72rem;
|
|
height: 1.05rem;
|
|
border-radius: 999px;
|
|
background: rgba(var(--overlay-rgb), 0.36);
|
|
filter: blur(12px);
|
|
opacity: 0.9;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
}
|
|
#planner-picker-search-shell:focus-within {
|
|
background: rgb(var(--card-rgb)) !important;
|
|
border: 1px solid rgba(var(--border-input-rgb), 0.62) !important;
|
|
box-shadow:
|
|
var(--shadow-shell),
|
|
inset 0 2px 7px rgba(var(--overlay-rgb), 0.18),
|
|
inset 0 -1px 2px rgba(255, 255, 255, 0.03) !important;
|
|
}
|
|
#planner-picker-search {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
background: transparent !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
backdrop-filter: none !important;
|
|
color: rgb(var(--text-body-rgb)) !important;
|
|
caret-color: rgb(var(--text-body-rgb));
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
#planner-picker-search::placeholder,
|
|
#pantry-search::placeholder {
|
|
color: rgba(var(--text-body-soft-rgb), 0.72) !important;
|
|
opacity: 1;
|
|
}
|
|
#planner-picker-filter-btn {
|
|
border-radius: 999px;
|
|
background: transparent !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
#planner-picker-filter-btn:hover {
|
|
background: var(--hover-overlay) !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: transparent !important;
|
|
backdrop-filter: none;
|
|
}
|
|
#planner-picker-backdrop,
|
|
#planner-ing-backdrop,
|
|
#pv2-edit-bg,
|
|
#mpe-overlay {
|
|
background: rgba(var(--overlay-rgb), 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.58rem + env(safe-area-inset-bottom));
|
|
pointer-events: none;
|
|
}
|
|
#app-bottom-nav .bottom-dock {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
width: min(calc(100% - 2.4rem), 24.5rem);
|
|
height: 3.34rem;
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
align-items: stretch;
|
|
gap: 0.06rem;
|
|
padding: 0.22rem;
|
|
border-radius: 1.68rem;
|
|
background: rgb(var(--card-rgb));
|
|
border: 1px solid rgb(var(--border-card-rgb));
|
|
box-shadow:
|
|
inset 0 1px 8px rgba(var(--overlay-rgb), 0.15),
|
|
var(--shadow-shell);
|
|
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: rgba(var(--text-primary-rgb), 0.94);
|
|
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: rgb(var(--text-primary-rgb));
|
|
background: var(--hover-overlay) !important;
|
|
}
|
|
#app-bottom-nav .nav-tab.is-active {
|
|
width: 100%;
|
|
height: 100%;
|
|
color: rgb(var(--text-primary-rgb));
|
|
background: rgb(var(--app-bg-rgb)) !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 var(--hover-overlay),
|
|
0 0 0 6px rgba(var(--text-body-rgb), 0.26) !important;
|
|
}
|
|
@media (max-width: 380px) {
|
|
#app-bottom-nav {
|
|
padding-inline: 0.7rem;
|
|
}
|
|
#app-bottom-nav .bottom-dock {
|
|
width: min(calc(100% - 1.6rem), 22.5rem);
|
|
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');
|
|
const themeMeta = document.querySelector('meta[name="theme-color"]');
|
|
if (themeMeta) {
|
|
const appBgRgb = getComputedStyle(document.documentElement).getPropertyValue('--app-bg-rgb').trim();
|
|
if (appBgRgb) themeMeta.setAttribute('content', `rgb(${appBgRgb})`);
|
|
}
|
|
</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:rgb(var(--app-bg-rgb)) !important;">
|
|
<div class="text-[13px] font-medium" style="color:rgb(var(--text-muted-rgb)) !important;">Ładowanie...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const APP_ASSET_VERSION = '20260417-svg6';
|
|
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__ || '20260410-110';
|
|
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:rgb(var(--app-bg-rgb)) !important;">
|
|
<div class="max-w-[18rem] rounded-[1.5rem] border px-5 py-6" style="background:rgb(var(--card-soft-rgb)) !important; border-color:rgb(var(--card-strong-rgb)) !important;">
|
|
<p class="text-sm font-semibold" style="color:rgb(var(--text-emphasis-rgb)) !important;">Aplikacja nie wystartowała</p>
|
|
<p class="mt-2 text-xs leading-relaxed" style="color:rgb(var(--text-muted-rgb)) !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:rgb(var(--sunken-rgb)) !important; border-color:rgb(var(--border-input-rgb)) !important; color:rgb(var(--text-emphasis-rgb)) !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>
|