1275 lines
45 KiB
HTML
1275 lines
45 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Recettes - Cook</title>
|
|
<link rel="icon" type="image/x-icon" href="./static/favicon.ico">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="./static/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="./static/favicon-16x16.png">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="./static/apple-touch-icon.png">
|
|
<link rel="manifest" href="./static/site.webmanifest">
|
|
<link href="./static/css/output.css" rel="stylesheet">
|
|
<link href="./static/css/custom-styles.css" rel="stylesheet">
|
|
<script>
|
|
// Check for saved theme preference, or check for prefers-color-scheme, or default to light
|
|
const theme = localStorage.getItem('theme')
|
|
|| (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : '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-50:hover {
|
|
background-color: #374151;
|
|
}
|
|
|
|
.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="./"].hover\:bg-gradient-to-r:hover {
|
|
background: #374151 !important;
|
|
}
|
|
|
|
.dark .hover\:text-orange-700:hover {
|
|
color: #fb923c !important;
|
|
}
|
|
|
|
.dark .hover\:text-purple-700:hover {
|
|
color: #a78bfa !important;
|
|
}
|
|
|
|
/* Nav pill dark mode */
|
|
.dark .nav-pill {
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.dark .nav-pill:hover {
|
|
background: #374151;
|
|
color: #fb923c;
|
|
}
|
|
|
|
.dark .nav-pill.active {
|
|
background: linear-gradient(135deg, #ff6b35, #f97316);
|
|
color: white;
|
|
}
|
|
|
|
/* 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="./"] {
|
|
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="./index.html" class="order-1 hidden md:flex items-center space-x-2">
|
|
<img src="./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="Rechercher des recettes..."
|
|
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-hidden 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">
|
|
|
|
<div class="hidden md:flex items-center gap-1 mr-2 lg:mr-4">
|
|
<a href="./index.html"
|
|
class="nav-pill active">
|
|
Recettes
|
|
</a>
|
|
|
|
|
|
</div>
|
|
|
|
<!-- Inline buttons on md+ screens -->
|
|
|
|
<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">
|
|
|
|
<a href="./index.html" 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 font-semibold text-orange-600">
|
|
<span>🍳</span> <span>Recettes</span>
|
|
</a>
|
|
|
|
|
|
<div class="border-t border-gray-100 dark:border-gray-700 my-1"></div>
|
|
|
|
|
|
<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>
|
|
|
|
<div>
|
|
|
|
|
|
<div class="flex items-center justify-between mb-8">
|
|
<h1 class="text-3xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent">
|
|
Toutes les Recettes
|
|
</h1>
|
|
|
|
</div>
|
|
|
|
<div id="sort-controls" class="hidden items-center gap-2 mb-6">
|
|
<label for="sort-field" class="text-sm text-gray-500 dark:text-gray-400">Trier par :</label>
|
|
<select id="sort-field" class="text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-2 py-1.5 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-hidden focus:ring-2 focus:ring-purple-300">
|
|
<option value="name">Nom</option>
|
|
<option value="modified">Modifié</option>
|
|
<option value="created" id="sort-created-option">Créé</option>
|
|
</select>
|
|
<button id="sort-dir" class="px-2 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors" title="Inverser l'ordre">↑</button>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="recipes-grid" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
|
|
|
|
<a href="./recipe/cuisses_poulet_four.html"
|
|
data-type="recipe"
|
|
data-modified="1786981284"
|
|
|
|
class="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all hover:scale-105 recipe-card flex flex-col">
|
|
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-orange-400 to-pink-500 rounded-full mb-4">
|
|
<span class="text-2xl">🍽️</span>
|
|
</div>
|
|
|
|
<h3 class="font-bold text-lg mb-2 text-gray-800">
|
|
Cuisses de poulet au four (cuisson lente)
|
|
|
|
</h3>
|
|
|
|
|
|
|
|
<div class="mt-3 flex flex-wrap gap-2">
|
|
|
|
<span class="text-xs bg-gradient-to-r from-yellow-100 to-orange-100 text-orange-700 px-2 py-1 rounded-full font-medium">batch</span>
|
|
|
|
<span class="text-xs bg-gradient-to-r from-yellow-100 to-orange-100 text-orange-700 px-2 py-1 rounded-full font-medium">four</span>
|
|
|
|
<span class="text-xs bg-gradient-to-r from-yellow-100 to-orange-100 text-orange-700 px-2 py-1 rounded-full font-medium">poulet</span>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</a>
|
|
|
|
|
|
|
|
<a href="./recipe/galette_lentilles.html"
|
|
data-type="recipe"
|
|
data-modified="1786981284"
|
|
|
|
class="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all hover:scale-105 recipe-card flex flex-col">
|
|
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-orange-400 to-pink-500 rounded-full mb-4">
|
|
<span class="text-2xl">🍽️</span>
|
|
</div>
|
|
|
|
<h3 class="font-bold text-lg mb-2 text-gray-800">
|
|
Galettes de lentilles
|
|
|
|
</h3>
|
|
|
|
|
|
|
|
<div class="mt-3 flex flex-wrap gap-2">
|
|
|
|
<span class="text-xs bg-gradient-to-r from-yellow-100 to-orange-100 text-orange-700 px-2 py-1 rounded-full font-medium">végétarien</span>
|
|
|
|
<span class="text-xs bg-gradient-to-r from-yellow-100 to-orange-100 text-orange-700 px-2 py-1 rounded-full font-medium">poêle</span>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</a>
|
|
|
|
|
|
|
|
<a href="./recipe/mi-cuit_chocolat.html"
|
|
data-type="recipe"
|
|
data-modified="1786981284"
|
|
|
|
class="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all hover:scale-105 recipe-card flex flex-col">
|
|
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-orange-400 to-pink-500 rounded-full mb-4">
|
|
<span class="text-2xl">🍽️</span>
|
|
</div>
|
|
|
|
<h3 class="font-bold text-lg mb-2 text-gray-800">
|
|
Le gâteau mi-cuit au chocolat de Suzy Palatin
|
|
|
|
</h3>
|
|
|
|
|
|
|
|
<div class="mt-3 flex flex-wrap gap-2">
|
|
|
|
<span class="text-xs bg-gradient-to-r from-yellow-100 to-orange-100 text-orange-700 px-2 py-1 rounded-full font-medium">chocolat</span>
|
|
|
|
<span class="text-xs bg-gradient-to-r from-yellow-100 to-orange-100 text-orange-700 px-2 py-1 rounded-full font-medium">gâteau</span>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</a>
|
|
|
|
|
|
|
|
<a href="./recipe/legumes_rotis.html"
|
|
data-type="recipe"
|
|
data-modified="1786981284"
|
|
|
|
class="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all hover:scale-105 recipe-card flex flex-col">
|
|
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-orange-400 to-pink-500 rounded-full mb-4">
|
|
<span class="text-2xl">🍽️</span>
|
|
</div>
|
|
|
|
<h3 class="font-bold text-lg mb-2 text-gray-800">
|
|
Légumes rôtis au four
|
|
|
|
</h3>
|
|
|
|
|
|
|
|
<div class="mt-3 flex flex-wrap gap-2">
|
|
|
|
<span class="text-xs bg-gradient-to-r from-yellow-100 to-orange-100 text-orange-700 px-2 py-1 rounded-full font-medium">batch</span>
|
|
|
|
<span class="text-xs bg-gradient-to-r from-yellow-100 to-orange-100 text-orange-700 px-2 py-1 rounded-full font-medium">four</span>
|
|
|
|
<span class="text-xs bg-gradient-to-r from-yellow-100 to-orange-100 text-orange-700 px-2 py-1 rounded-full font-medium">légumes</span>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</a>
|
|
|
|
|
|
|
|
<a href="./recipe/poisson_papillote.html"
|
|
data-type="recipe"
|
|
data-modified="1786981284"
|
|
|
|
class="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all hover:scale-105 recipe-card flex flex-col">
|
|
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-orange-400 to-pink-500 rounded-full mb-4">
|
|
<span class="text-2xl">🍽️</span>
|
|
</div>
|
|
|
|
<h3 class="font-bold text-lg mb-2 text-gray-800">
|
|
Poisson en papillote
|
|
|
|
</h3>
|
|
|
|
|
|
|
|
<div class="mt-3 flex flex-wrap gap-2">
|
|
|
|
<span class="text-xs bg-gradient-to-r from-yellow-100 to-orange-100 text-orange-700 px-2 py-1 rounded-full font-medium">four</span>
|
|
|
|
<span class="text-xs bg-gradient-to-r from-yellow-100 to-orange-100 text-orange-700 px-2 py-1 rounded-full font-medium">poisson</span>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</a>
|
|
|
|
|
|
|
|
<a href="./recipe/porc_effiloche.html"
|
|
data-type="recipe"
|
|
data-modified="1786981284"
|
|
|
|
class="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all hover:scale-105 recipe-card flex flex-col">
|
|
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-orange-400 to-pink-500 rounded-full mb-4">
|
|
<span class="text-2xl">🍽️</span>
|
|
</div>
|
|
|
|
<h3 class="font-bold text-lg mb-2 text-gray-800">
|
|
Porc effiloché au four
|
|
|
|
</h3>
|
|
|
|
|
|
|
|
<div class="mt-3 flex flex-wrap gap-2">
|
|
|
|
<span class="text-xs bg-gradient-to-r from-yellow-100 to-orange-100 text-orange-700 px-2 py-1 rounded-full font-medium">batch</span>
|
|
|
|
<span class="text-xs bg-gradient-to-r from-yellow-100 to-orange-100 text-orange-700 px-2 py-1 rounded-full font-medium">four</span>
|
|
|
|
<span class="text-xs bg-gradient-to-r from-yellow-100 to-orange-100 text-orange-700 px-2 py-1 rounded-full font-medium">porc</span>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</a>
|
|
|
|
|
|
|
|
<a href="./recipe/saucisses.html"
|
|
data-type="recipe"
|
|
data-modified="1786981284"
|
|
|
|
class="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all hover:scale-105 recipe-card flex flex-col">
|
|
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-orange-400 to-pink-500 rounded-full mb-4">
|
|
<span class="text-2xl">🍽️</span>
|
|
</div>
|
|
|
|
<h3 class="font-bold text-lg mb-2 text-gray-800">
|
|
Saucisses maison
|
|
|
|
</h3>
|
|
|
|
|
|
|
|
<div class="mt-3 flex flex-wrap gap-2">
|
|
|
|
<span class="text-xs bg-gradient-to-r from-yellow-100 to-orange-100 text-orange-700 px-2 py-1 rounded-full font-medium">saucisse</span>
|
|
|
|
<span class="text-xs bg-gradient-to-r from-yellow-100 to-orange-100 text-orange-700 px-2 py-1 rounded-full font-medium">poêle</span>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</a>
|
|
|
|
|
|
|
|
<a href="./recipe/ratatouille.html"
|
|
data-type="recipe"
|
|
data-modified="1786981284"
|
|
|
|
class="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all hover:scale-105 recipe-card flex flex-col">
|
|
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-orange-400 to-pink-500 rounded-full mb-4">
|
|
<span class="text-2xl">🍽️</span>
|
|
</div>
|
|
|
|
<h3 class="font-bold text-lg mb-2 text-gray-800">
|
|
« Ratatouille » du frigo
|
|
|
|
</h3>
|
|
|
|
|
|
|
|
<div class="mt-3 flex flex-wrap gap-2">
|
|
|
|
<span class="text-xs bg-gradient-to-r from-yellow-100 to-orange-100 text-orange-700 px-2 py-1 rounded-full font-medium">batch</span>
|
|
|
|
<span class="text-xs bg-gradient-to-r from-yellow-100 to-orange-100 text-orange-700 px-2 py-1 rounded-full font-medium">mijoté</span>
|
|
|
|
<span class="text-xs bg-gradient-to-r from-yellow-100 to-orange-100 text-orange-700 px-2 py-1 rounded-full font-medium">légumes</span>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</a>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
|
|
<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>
|
|
|
|
·
|
|
<a href="https://git.sqrt.fr/vincent/recipes" class="text-orange-600 hover:text-orange-700 hover:underline" target="_blank" rel="noopener">View source</a>
|
|
|
|
</footer>
|
|
|
|
</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>
|
|
|
|
|
|
<script>window.__PREFIX__ = ".";</script>
|
|
<script src="./static/js/search.js"></script>
|
|
|
|
|
|
<!-- URL prefix for JavaScript -->
|
|
<script>
|
|
window.__PREFIX__ = ".";
|
|
window.__STATIC_MODE__ = true;
|
|
</script>
|
|
|
|
<!-- Keyboard shortcuts -->
|
|
<script src="./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>
|
|
|
|
|
|
<script>
|
|
(function () {
|
|
const grid = document.getElementById('recipes-grid');
|
|
const controls = document.getElementById('sort-controls');
|
|
const fieldSelect = document.getElementById('sort-field');
|
|
const dirBtn = document.getElementById('sort-dir');
|
|
const createdOption = document.getElementById('sort-created-option');
|
|
|
|
if (!grid) return;
|
|
|
|
let sortField = 'name';
|
|
let sortDir = 'asc';
|
|
|
|
// Hide Created option unless every recipe card has a creation date
|
|
const allRecipeCards = grid.querySelectorAll('[data-type="recipe"]');
|
|
const allHaveCreated = allRecipeCards.length > 0 &&
|
|
Array.from(allRecipeCards).every(el => el.hasAttribute('data-created'));
|
|
if (!allHaveCreated && createdOption) {
|
|
createdOption.remove();
|
|
}
|
|
|
|
// Show controls only when there are at least 2 recipe cards
|
|
const recipeCount = grid.querySelectorAll('[data-type="recipe"]').length;
|
|
if (recipeCount >= 2) {
|
|
controls.classList.remove('hidden');
|
|
controls.classList.add('flex');
|
|
}
|
|
|
|
function getValue(el) {
|
|
if (sortField === 'name') {
|
|
return (el.querySelector('h3')?.textContent ?? '').trim().toLowerCase();
|
|
}
|
|
const attr = sortField === 'modified' ? 'data-modified' : 'data-created';
|
|
const raw = el.getAttribute(attr);
|
|
if (raw === null) return null;
|
|
const n = parseInt(raw, 10);
|
|
return Number.isNaN(n) ? null : n;
|
|
}
|
|
|
|
function applySort() {
|
|
const all = Array.from(grid.children);
|
|
const dirs = all.filter(el => el.dataset.type === 'directory');
|
|
const recipes = all.filter(el => el.dataset.type === 'recipe');
|
|
const others = all.filter(el => !el.dataset.type);
|
|
|
|
recipes.sort((a, b) => {
|
|
const av = getValue(a);
|
|
const bv = getValue(b);
|
|
if (av === null && bv === null) return 0;
|
|
if (av === null) return 1;
|
|
if (bv === null) return -1;
|
|
const cmp = typeof av === 'string' ? av.localeCompare(bv) : av - bv;
|
|
return sortDir === 'asc' ? cmp : -cmp;
|
|
});
|
|
|
|
dirs.forEach(el => grid.appendChild(el));
|
|
recipes.forEach(el => grid.appendChild(el));
|
|
others.forEach(el => grid.appendChild(el));
|
|
|
|
dirBtn.textContent = sortDir === 'asc' ? '↑' : '↓';
|
|
}
|
|
|
|
fieldSelect.addEventListener('change', function () {
|
|
sortField = this.value;
|
|
// Default to desc for date sorts (newest first), asc for name
|
|
sortDir = sortField === 'name' ? 'asc' : 'desc';
|
|
applySort();
|
|
});
|
|
|
|
dirBtn.addEventListener('click', function () {
|
|
sortDir = sortDir === 'asc' ? 'desc' : 'asc';
|
|
applySort();
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
</html> |