341 lines
17 KiB
HTML
341 lines
17 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">
|
|
<title>Recipe App - Modular</title>
|
|
<link rel="manifest" href="./manifest.webmanifest">
|
|
<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;
|
|
}
|
|
#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: linear-gradient(180deg, rgba(var(--surface-rgb), 0.94), rgba(var(--surface-soft-rgb), 0.97)) !important;
|
|
border-color: rgba(var(--line-rgb), 0.14) !important;
|
|
border-radius: 1.75rem !important;
|
|
box-shadow: var(--panel-shadow) !important;
|
|
transition: transform 180ms ease, box-shadow 180ms ease !important;
|
|
}
|
|
#recipe-grid > div:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--panel-shadow-strong) !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;
|
|
}
|
|
#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);
|
|
}
|
|
|
|
/* 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>
|
|
|
|
<script>
|
|
if ('serviceWorker' in navigator) {
|
|
navigator.serviceWorker.register('./sw.js', { scope: './' }).catch(() => {});
|
|
}
|
|
</script>
|
|
<script type="module" src="js/app.js?v=18"></script>
|
|
</body>
|
|
</html>
|