<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Cook{% endblock %}</title>
<link rel="icon" type="image/x-icon" href="{{ prefix }}/static/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="{{ prefix }}/static/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="{{ prefix }}/static/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="{{ prefix }}/static/apple-touch-icon.png">
<link rel="manifest" href="{{ prefix }}/static/site.webmanifest">
<link href="{{ prefix }}/static/css/output.css" rel="stylesheet">
<link href="{{ prefix }}/static/css/custom-styles.css" rel="stylesheet">
<script>
// Check for saved theme preference or default to light
const theme = localStorage.getItem('theme') || 'light';
document.documentElement.classList.toggle('dark', theme === 'dark');
</script>
<style>
.viewport {
width: 100%;
max-width: 72rem;
margin: 2rem auto;
padding: 0 1rem;
}
/* Dark mode styles */
.dark {
color-scheme: dark;
}
.dark body {
background-color: #111827;
}
.dark .bg-gray-50 {
background-color: #111827;
}
.dark .bg-white {
background-color: #1f2937;
}
.dark .text-gray-900 {
color: #f9fafb;
}
.dark .text-gray-800 {
color: #e5e7eb;
}
.dark .text-gray-700 {
color: #d1d5db;
}
.dark .text-gray-600 {
color: #9ca3af;
}
.dark .text-gray-500 {
color: #6b7280;
}
.dark .text-gray-400 {
color: #9ca3af;
}
.dark .border-gray-300 {
border-color: #4b5563;
}
.dark .border-gray-200 {
border-color: #374151;
}
.dark .border-purple-200 {
border-color: #7c3aed;
}
.dark .hover\\:text-gray-900:hover {
color: #f9fafb;
}
.dark .hover\\:text-gray-800:hover {
color: #e5e7eb;
}
.dark .hover\\:bg-gray-100:hover {
background-color: #374151;
}
.dark .bg-gradient-to-r.from-orange-50.to-yellow-50 {
background: linear-gradient(to right, #1f2937, #111827);
border: 1px solid #374151;
}
.dark .bg-gradient-to-r.from-gray-50.to-orange-50 {
background: linear-gradient(to right, #1f2937, #111827);
border: 1px solid #374151;
}
.dark .bg-gradient-to-r.from-green-50.to-blue-50 {
background: linear-gradient(to right, #1f2937, #111827);
border: 1px solid #374151;
}
.dark .bg-gradient-to-r.from-blue-50.to-purple-50 {
background: linear-gradient(to right, #1f2937, #111827);
border: 1px solid #374151;
}
/* Shopping list specific dark styles */
.dark .bg-gradient-to-r.from-purple-50.to-pink-50 {
background: linear-gradient(to right, #1f2937, #111827);
border: 1px solid #374151;
}
.dark .bg-gradient-to-r.from-green-50.to-emerald-50 {
background: linear-gradient(to right, #1f2937, #111827);
border: 1px solid #374151;
}
/* Plan cards in the shopping list use an indigo/purple gradient */
.dark .bg-gradient-to-r.from-indigo-50.to-purple-50 {
background: linear-gradient(to right, #1f2937, #111827);
border: 1px solid #374151;
}
.dark .border-indigo-200 {
border-color: #4c1d95;
}
.dark .border-purple-200 {
border-color: #4c1d95;
}
.dark .border-green-200 {
border-color: #065f46;
}
.dark .border-orange-200 {
border-color: #7c2d12;
}
.dark .border-blue-400 {
border-color: #1e3a8a;
}
/* Dark mode hover states */
.dark .hover\\:bg-gradient-to-r:hover {
background: #374151 !important;
}
.dark .hover\\:from-purple-50:hover,
.dark .hover\\:to-pink-50:hover {
background: #374151 !important;
}
.dark .hover\\:from-orange-100:hover,
.dark .hover\\:to-amber-100:hover {
background: #374151 !important;
}
.dark .hover\\:from-purple-100:hover,
.dark .hover\\:to-pink-100:hover {
background: #374151 !important;
}
.dark a.hover\\:bg-gradient-to-r:hover {
background: #374151 !important;
color: #e5e7eb !important;
}
/* Fix for navigation pill hover states */
.dark a[href="{{ prefix }}/"].hover\\:bg-gradient-to-r:hover{% if !static_mode %},
.dark a[href="{{ prefix }}/shopping-list"].hover\\:bg-gradient-to-r:hover{% endif %} {
background: #374151 !important;
}
.dark .hover\\:text-orange-700:hover {
color: #fb923c !important;
}
.dark .hover\\:text-purple-700:hover {
color: #a78bfa !important;
}
/* Button dark mode styles */
.dark .bg-gray-200 {
background-color: #4b5563;
}
.dark .hover\\:bg-gray-300:hover {
background-color: #6b7280;
}
.dark .bg-gray-200.text-gray-700 {
color: #e5e7eb;
}
/* Text colors in various contexts */
.dark .text-purple-600 {
color: #c084fc;
}
.dark .text-red-500 {
color: #ef4444;
}
.dark .hover\\:text-red-700:hover {
color: #dc2626;
}
.dark .text-green-600 {
color: #34d399;
}
.dark .shadow-lg, .dark .shadow-md, .dark .shadow-xl {
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}
/* Dark mode tag and badge styles */
.dark .bg-gradient-to-r.from-yellow-100.to-orange-100 {
background: linear-gradient(to right, #374151, #4b5563);
}
.dark .text-orange-700 {
color: #fb923c;
}
.dark .text-orange-600 {
color: #fb923c;
}
.dark .bg-gradient-to-r.from-purple-100.to-pink-100 {
background: linear-gradient(to right, #374151, #4b5563);
}
.dark .text-purple-700 {
color: #a78bfa;
}
.dark .bg-gray-100 {
background-color: #374151;
}
/* Recipe card specific dark styles */
.dark .recipe-card {
background-color: #1f2937;
border: 1px solid #374151;
}
/* Search result keyboard selection */
#search-results a.search-selected {
background: linear-gradient(to right, #f3e8ff, #fce7f3) !important;
}
/* Search results dark mode */
.dark #search-results {
background-color: #1f2937;
border-color: #7c3aed;
}
.dark #search-results a {
color: #e5e7eb;
}
.dark #search-results a:hover,
.dark #search-results a.search-selected {
background-color: #374151 !important;
}
.dark #search-results .text-gray-800 {
color: #e5e7eb;
}
.dark #search-results .text-gray-500 {
color: #9ca3af;
}
/* Override inline hover styles in search results */
.dark #search-results a.hover\\:bg-gradient-to-r:hover {
background: #374151 !important;
}
.dark #search-results .border-gray-100 {
border-color: #374151;
}
.dark #search-input {
background-color: #374151;
border-color: #7c3aed;
color: #e5e7eb;
}
.dark #search-input::placeholder {
color: #6b7280;
}
.dark #search-input:focus {
border-color: #a78bfa;
}
/* Theme toggle button styles */
.theme-toggle {
position: relative;
width: 50px;
height: 24px;
background-color: #9ca3af;
border-radius: 12px;
padding: 2px;
cursor: pointer;
transition: background-color 0.3s;
}
.theme-toggle.dark {
background-color: #7c3aed;
}
.theme-toggle-handle {
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
transition: transform 0.3s;
display: flex;
align-items: center;
justify-content: center;
}
.theme-toggle.dark .theme-toggle-handle {
transform: translateX(26px);
}
@media print {
/* Reset color-scheme so browser default text color is dark, not
light. Without this, elements without an explicit text color
(e.g. ingredient/cookware names) inherit the dark-mode default
white text and become invisible on the forced white background. */
html, html.dark {
color-scheme: light !important;
}
/* Default text color for dark mode when printing */
.dark,
.dark body {
color: #111827 !important;
}
/* Force light mode for printing */
.dark body,
.dark .bg-gray-50,
.dark .bg-white,
.dark .bg-gray-100 {
background-color: white !important;
}
.dark .text-gray-900, .dark h1, .dark h2, .dark h3 {
color: #111827 !important;
}
.dark .text-gray-800 {
color: #1f2937 !important;
}
.dark .text-gray-700,
.dark .text-gray-600 {
color: #374151 !important;
}
.dark .text-orange-600, .dark .text-orange-700 {
color: #c2410c !important;
}
.dark .text-green-600 {
color: #16a34a !important;
}
.dark .text-purple-600 {
color: #9333ea !important;
}
.dark .text-red-500 {
color: #ef4444 !important;
}
.dark .border-gray-200, .dark .border-gray-300 {
border-color: #e5e7eb !important;
}
.dark .shadow-lg, .dark .shadow-md, .dark .shadow-xl {
box-shadow: none !important;
}
.dark .bg-gradient-to-r {
background: transparent !important;
border-color: #e5e7eb !important;
}
.dark .recipe-card {
background-color: white !important;
border-color: #e5e7eb !important;
}
/* Dark mode badges must be readable when printed */
.dark .ingredient-badge {
background: #fef3c7 !important;
color: #9a3412 !important;
border-color: #fb923c !important;
}
.dark .cookware-badge {
background: #dcfce7 !important;
color: #14532d !important;
border-color: #4ade80 !important;
}
.dark .timer-badge {
background: #fee2e2 !important;
color: #7f1d1d !important;
border-color: #f87171 !important;
}
.dark .step-number {
background: #f97316 !important;
color: white !important;
}
.dark .tag {
background: linear-gradient(135deg, #fbbf24, #fb923c) !important;
color: white !important;
}
.dark .metadata-pill {
background: white !important;
color: #374151 !important;
}
/* Global print styles */
* {
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
body {
background: white !important;
margin: 0;
padding: 0;
}
.viewport {
max-width: 100%;
margin: 0;
padding: 0;
}
/* Hide navigation and non-essential elements */
nav, #search-container, #search-input, #search-results, .print\\:hidden, .breadcrumb {
display: none !important;
}
/* Hide entire navigation bar and its contents */
.bg-white.shadow-lg.rounded-2xl.mb-8 {
display: none !important;
}
/* Hide all navigation links */
a[href="{{ prefix }}/"]{% if !static_mode %}, a[href="{{ prefix }}/shopping-list"], a[href="{{ prefix }}/preferences"]{% endif %} {
display: none !important;
}
/* Recipe layout for print */
.grid {
display: block !important;
}
/* Remove shadows and borders for cleaner print */
.shadow-lg, .shadow-md, .shadow-xl {
box-shadow: none !important;
}
.rounded-2xl, .rounded-xl, .rounded-lg {
border-radius: 0 !important;
}
/* Optimize colors for print */
.bg-gradient-to-r {
background: transparent !important;
}
.text-orange-600, .text-orange-700 {
color: #000 !important;
font-weight: bold;
}
.text-green-600 {
color: #000 !important;
}
/* Page breaks */
.md\\:col-span-1, .md\\:col-span-2 {
page-break-inside: avoid;
width: 100% !important;
}
/* Ingredient and step styling */
.bg-gradient-to-r.from-orange-50,
.bg-gradient-to-r.from-green-50,
.bg-gradient-to-r.from-gray-50,
.bg-gradient-to-r.from-blue-50,
.dark .bg-gradient-to-r.from-orange-50,
.dark .bg-gradient-to-r.from-green-50,
.dark .bg-gradient-to-r.from-gray-50,
.dark .bg-gradient-to-r.from-blue-50 {
background: #f9f9f9 !important;
border: 1px solid #ddd !important;
}
/* Step numbers */
.step-number {
background: #000 !important;
color: #fff !important;
}
/* Images */
img {
max-height: 300px !important;
max-width: 100% !important;
height: auto !important;
object-fit: contain !important;
page-break-inside: avoid;
page-break-after: avoid;
}
/* Recipe sections on same page if possible */
h2, h3 {
page-break-after: avoid;
}
ol, ul {
page-break-inside: avoid;
}
/* Compact spacing */
.mb-8, .mb-6, .mb-4 {
margin-bottom: 0.5rem !important;
}
.p-6 {
padding: 0.5rem !important;
}
/* Recipe header */
h1 {
color: #000 !important;
font-size: 1.5rem !important;
margin-bottom: 0 !important;
}
/* Print-specific flexbox utilities */
.print\\:flex-row {
flex-direction: row !important;
}
.print\\:items-center {
align-items: center !important;
}
.print\\:block {
display: block !important;
}
.print\\:text-2xl {
font-size: 1.5rem !important;
}
/* Ensure ingredients and instructions stay together */
.bg-white {
background: white !important;
border: none !important;
}
/* Remove truncation in print so text is fully visible */
.truncate {
overflow: visible !important;
text-overflow: unset !important;
white-space: normal !important;
max-width: none !important;
display: inline !important;
}
/* Shopping list print styles */
.lg\:w-2\/5, .xl\:w-1\/3 {
display: none !important;
}
/* Only apply flex override to top-level shopping list layout */
#shopping-list-results ~ .flex-1,
.flex.min-h-screen > .flex-1 {
width: 100% !important;
flex: none !important;
}
#shopping-list-results {
font-size: 11pt !important;
line-height: 1.2 !important;
}
#shopping-list-results input[type="checkbox"] {
display: none !important;
}
#shopping-list-results li .flex-1 {
width: auto !important;
flex: 1 1 0% !important;
}
#shopping-list-results label {
cursor: default !important;
}
#shopping-list-results h2 {
font-size: 14pt !important;
margin-bottom: 0.1rem !important;
}
#shopping-list-results h3 {
font-size: 11pt !important;
margin-bottom: 0 !important;
}
#shopping-list-results .space-y-2,
#shopping-list-results ul {
gap: 0 !important;
--tw-space-y-reverse: 0 !important;
}
#shopping-list-results .space-y-2 > * + *,
#shopping-list-results ul > * + * {
margin-top: 0 !important;
}
#shopping-list-results li {
padding: 0 !important;
line-height: 1.3 !important;
border-bottom: 1px dotted #ccc;
}
#shopping-list-results .mb-6 {
margin-bottom: 0.15rem !important;
}
#shopping-list-results .mb-4,
#shopping-list-results .mb-3 {
margin-bottom: 0 !important;
}
#shopping-list-results .p-4,
#shopping-list-results .p-3,
#shopping-list-results .px-3 {
padding: 0 !important;
}
#shopping-list-results .gap-6 {
gap: 0 !important;
}
#shopping-list-results .rounded-lg {
border: none !important;
}
/* Menu print styles */
#menu-content {
font-size: 10pt !important;
line-height: 1.4 !important;
}
#menu-content h1 {
font-size: 14pt !important;
margin-bottom: 0.25rem !important;
color: #000 !important;
-webkit-text-fill-color: #000 !important;
}
#menu-content .space-y-6 > * + * {
margin-top: 0.3rem !important;
}
#menu-content .menu-section {
border: 1px solid #ccc !important;
border-radius: 0 !important;
page-break-inside: avoid;
}
#menu-content .menu-section-header {
background: #eee !important;
color: #000 !important;
padding: 0.15rem 0.5rem !important;
}
#menu-content .menu-section-header h2 {
font-size: 11pt !important;
color: #000 !important;
}
#menu-content .menu-section-body {
padding: 0.25rem 0.5rem !important;
}
#menu-content .menu-section-body .space-y-2 > * + *,
#menu-content .menu-section-body > * + * {
margin-top: 0.05rem !important;
}
#menu-content .menu-section-body h3 {
font-size: 10pt !important;
margin-top: 0.2rem !important;
margin-bottom: 0 !important;
}
#menu-content .menu-section-body .pl-6 {
padding-left: 1rem !important;
}
/* Preserve word spacing in flex lines */
#menu-content .menu-section-body .flex {
gap: 0.25em !important;
}
#menu-content .ingredient-badge {
background: transparent !important;
border: none !important;
padding: 0 !important;
font-weight: bold !important;
color: #000 !important;
}
#menu-content a {
color: #000 !important;
text-decoration: none !important;
}
}
</style>
</head>
<body class="bg-gray-50">
<div class="viewport">
<nav class="bg-white shadow-lg rounded-2xl mb-8 relative">
<div class="px-3 lg:px-6 py-4 relative">
<div class="flex items-center justify-between flex-wrap gap-y-3">
<a href="{{ prefix }}/{% if static_mode %}index.html{% endif %}" class="order-1 hidden md:flex items-center space-x-2">
<img src="{{ prefix }}/static/android-chrome-192x192.png" alt="Cook" class="h-8 w-8 rounded-md dark:bg-gray-200 dark:p-0.5" width="32" height="32">
</a>
<div class="relative z-50 order-2 flex-1 md:ml-2 md:mr-4" id="search-container">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
<input type="text"
id="search-input"
placeholder="{{ tr.t("search-placeholder") }}"
class="w-full pl-10 pr-4 py-2.5 bg-white border-2 border-purple-200 rounded-xl text-gray-900 placeholder-gray-500 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 focus:outline-none transition-all shadow-md hover:shadow-lg">
<div id="search-results"
class="absolute top-full mt-2 w-full bg-white border-2 border-purple-200 rounded-xl shadow-xl hidden max-h-96 overflow-y-auto"
style="z-index: 9999;">
</div>
</div>
<div class="order-3 w-full md:w-auto flex items-center gap-1 lg:gap-2">
<a href="{{ prefix }}/{% if static_mode %}index.html{% endif %}" class="px-3 lg:px-5 py-2 rounded-full font-medium whitespace-nowrap text-sm lg:text-base transition-all duration-300 {% if active == "recipes" %}bg-gradient-to-r from-orange-500 to-amber-500 text-white font-bold shadow-lg scale-105{% else %}text-gray-600 hover:bg-gradient-to-r hover:from-orange-100 hover:to-amber-100 hover:text-orange-700 hover:shadow-md hover:-translate-y-0.5{% endif %}">
<span>{{ tr.t("nav-recipes") }}</span>
</a>
{% if !static_mode %}
<a href="{{ prefix }}/shopping-list" class="px-3 lg:px-5 py-2 rounded-full font-medium whitespace-nowrap text-sm lg:text-base transition-all duration-300 {% if active == "shopping" %}bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold shadow-lg scale-105{% else %}text-gray-600 hover:bg-gradient-to-r hover:from-purple-100 hover:to-pink-100 hover:text-purple-700 hover:shadow-md hover:-translate-y-0.5{% endif %}">
<span>{{ tr.t("nav-shopping-list") }}</span>
</a>
{% endif %}
{% if !static_mode %}
<a href="{{ prefix }}/pantry" class="px-3 lg:px-5 py-2 rounded-full font-medium whitespace-nowrap text-sm lg:text-base transition-all duration-300 {% if active == "pantry" %}bg-gradient-to-r from-green-500 to-teal-500 text-white font-bold shadow-lg scale-105{% else %}text-gray-600 hover:bg-gradient-to-r hover:from-green-100 hover:to-teal-100 hover:text-green-700 hover:shadow-md hover:-translate-y-0.5{% endif %}">
<span>{{ tr.t("nav-pantry") }}</span>
</a>
{% endif %}
<!-- Inline buttons on md+ screens -->
{% if !static_mode %}
<a href="{{ prefix }}/preferences" class="hidden md:inline-flex px-3 lg:px-5 py-2 rounded-full font-medium whitespace-nowrap text-sm lg:text-base transition-all duration-300 {% if active == "preferences" %}bg-gradient-to-r from-gray-600 to-gray-700 text-white font-bold shadow-lg scale-105{% else %}text-gray-600 hover:bg-gray-100 hover:text-gray-800 hover:shadow-md hover:-translate-y-0.5{% endif %}">
<span>⚙️</span>
</a>
{% endif %}
<button onclick="showShortcutsHelp()" class="hidden md:inline-flex ml-2 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors print:hidden" aria-label="Keyboard shortcuts" title="Keyboard shortcuts (?)">
<svg class="w-5 h-5 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</button>
<button onclick="toggleTheme()" class="hidden md:inline-flex ml-2 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors print:hidden" aria-label="Toggle theme">
<svg class="w-5 h-5 hidden dark:block text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path>
</svg>
<svg class="w-5 h-5 block dark:hidden text-gray-700" fill="currentColor" viewBox="0 0 20 20">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg>
</button>
<!-- Overflow menu for small screens -->
<div class="relative md:hidden ml-auto" id="more-menu-container">
<button onclick="document.getElementById('more-dropdown').classList.toggle('hidden')" class="p-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors" aria-label="More options">
<svg class="w-5 h-5 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
</svg>
</button>
<div id="more-dropdown" class="hidden absolute right-0 mt-2 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl shadow-xl z-50 py-1">
{% if !static_mode %}
<a href="{{ prefix }}/preferences" class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
<span>⚙️</span> <span>Preferences</span>
</a>
{% endif %}
<button onclick="showShortcutsHelp(); document.getElementById('more-dropdown').classList.add('hidden');" class="flex items-center gap-3 w-full px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span>Keyboard Shortcuts</span>
</button>
<button onclick="toggleTheme(); document.getElementById('more-dropdown').classList.add('hidden');" class="flex items-center gap-3 w-full px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
<svg class="w-4 h-4 hidden dark:block text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path></svg>
<svg class="w-4 h-4 block dark:hidden" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
<span>Toggle Theme</span>
</button>
</div>
</div>
</div>
</div>
</div>
</nav>
<main>
{% block content %}{% endblock %}
</main>
{% if static_mode %}
<footer class="mt-12 mb-6 text-center text-sm text-gray-500 print:hidden">
Built with
<a href="https://cooklang.org/cli/" class="text-orange-600 hover:text-orange-700 hover:underline" target="_blank" rel="noopener">CookCLI</a>
</footer>
{% endif %}
</div>
<script>
// Theme toggle function
function toggleTheme() {
const html = document.documentElement;
const currentTheme = html.classList.contains('dark') ? 'dark' : 'light';
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
html.classList.toggle('dark');
localStorage.setItem('theme', newTheme);
}
</script>
{% if !static_mode %}
<script>
// Translations for JavaScript
const translations = {
noRecipes: {{ tr.t("search-no-results")|json|safe }}
};
const searchInput = document.getElementById('search-input');
const searchResults = document.getElementById('search-results');
let searchTimeout;
let selectedIndex = -1;
function updateSearchSelection() {
const items = searchResults.querySelectorAll('a');
items.forEach((item, i) => {
if (i === selectedIndex) {
item.classList.add('search-selected');
item.scrollIntoView({ block: 'nearest' });
} else {
item.classList.remove('search-selected');
}
});
}
searchInput.addEventListener('input', function() {
clearTimeout(searchTimeout);
const query = this.value.trim();
selectedIndex = -1;
if (query.length < 2) {
searchResults.classList.add('hidden');
return;
}
searchTimeout = setTimeout(async () => {
try {
const response = await fetch(`{{ prefix }}/api/search?q=${encodeURIComponent(query)}`);
const results = await response.json();
selectedIndex = -1;
if (results.length === 0) {
searchResults.innerHTML = '<div class="p-4 text-gray-500 text-center">' + translations.noRecipes + '</div>';
} else {
searchResults.innerHTML = results.map(recipe =>
`<a href="{{ prefix }}/recipe/${recipe.path}" class="search-result block px-4 py-3 hover:bg-gradient-to-r hover:from-purple-50 hover:to-pink-50 transition-colors border-b border-gray-100 last:border-b-0">
<div class="font-medium text-gray-800">${recipe.name}</div>
</a>`
).join('');
}
searchResults.classList.remove('hidden');
} catch (error) {
console.error('Search failed:', error);
}
}, 300);
});
searchInput.addEventListener('keydown', function(e) {
const items = searchResults.querySelectorAll('a');
if (items.length === 0 || searchResults.classList.contains('hidden')) return;
switch (e.key) {
case 'ArrowDown':
e.preventDefault();
selectedIndex = Math.min(selectedIndex + 1, items.length - 1);
updateSearchSelection();
break;
case 'ArrowUp':
e.preventDefault();
selectedIndex = Math.max(selectedIndex - 1, -1);
updateSearchSelection();
break;
case 'Enter':
if (selectedIndex >= 0 && selectedIndex < items.length) {
e.preventDefault();
items[selectedIndex].click();
}
break;
}
});
document.addEventListener('click', function(e) {
if (!searchInput.contains(e.target) && !searchResults.contains(e.target)) {
searchResults.classList.add('hidden');
selectedIndex = -1;
}
// Close more-dropdown when clicking outside
const moreContainer = document.getElementById('more-menu-container');
const moreDropdown = document.getElementById('more-dropdown');
if (moreContainer && moreDropdown && !moreContainer.contains(e.target)) {
moreDropdown.classList.add('hidden');
}
});
</script>
{% else %}
<script>window.__PREFIX__ = {{ prefix|json|safe }};</script>
<script src="{{ prefix }}/static/js/search.js"></script>
{% endif %}
<!-- URL prefix for JavaScript -->
<script>
window.__PREFIX__ = {{ prefix|json|safe }};
window.__STATIC_MODE__ = {{ static_mode|json|safe }};
</script>
<!-- Keyboard shortcuts -->
<script src="{{ prefix }}/static/js/keyboard-shortcuts.js"></script>
<!-- Expose showShortcutsHelp globally for the help button -->
<script>
// showShortcutsHelp is defined in keyboard-shortcuts.js
// This ensures it's available for the onclick handler
if (typeof showShortcutsHelp === 'undefined') {
window.showShortcutsHelp = function() {
console.warn('Keyboard shortcuts not loaded');
};
}
</script>
{% block scripts %}{% endblock %}
</body>
</html>