1419 lines
59 KiB
HTML
1419 lines
59 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>Saucisses maison - 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>
|
|
|
|
<script type="application/ld+json">{"@context":"https://schema.org","@type":"Recipe","cookTime":"PT15M","keywords":"saucisse, poêle","name":"Saucisses maison","prepTime":"PT15M","recipeCategory":"plat","recipeIngredient":["450 g chair à saucisse bœuf et porc","ketchup","moutarde","pain à hot-dog","7 g paprika","persil plat (ciselé)","poivre","salade","salsa","3 g sel"],"recipeInstructions":[{"@type":"HowToStep","text":"Dans un saladier, mélanger la chair à saucisse bœuf et porc, le sel, une pincée de poivre, du persil plat et le paprika."},{"@type":"HowToStep","text":"Couper une bouteille en plastique d'1,5 L en deux : c'est le poussoir à saucisses."},{"@type":"HowToStep","text":"Transvaser la farce dans la moitié haute de la bouteille. Planter une pique à brochette dans le goulot."},{"@type":"HowToStep","text":"Retourner la moitié basse de la bouteille et l'enfoncer dans la partie ouverte, pour pousser la farce vers le goulot."},{"@type":"HowToStep","text":"Chauffer une sauteuse à feu moyen et cuire les saucisses à cœur."},{"@type":"HowToStep","text":"Garnir un pain à hot-dog de salade, ajouter de la salsa, puis la saucisse, et enfin ketchup et moutarde selon l'envie."}],"recipeYield":"4"}</script>
|
|
|
|
<div>
|
|
<nav class="mb-4 breadcrumb print:hidden">
|
|
<ol class="flex items-center space-x-2 text-sm text-gray-600">
|
|
<li><a href="../index.html" class="hover:text-gray-900">Recettes</a></li>
|
|
|
|
<li class="flex items-center">
|
|
<span class="mx-2 text-gray-400">/</span>
|
|
|
|
<span class="text-gray-900">saucisses</span>
|
|
|
|
</li>
|
|
|
|
</ol>
|
|
</nav>
|
|
|
|
<div class="mb-8">
|
|
<!-- Recipe image if available -->
|
|
|
|
|
|
|
|
<!-- Title bar with scale and shopping list button -->
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6 print:flex-row print:items-center">
|
|
<h1 class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent print:text-2xl">
|
|
Saucisses maison
|
|
</h1>
|
|
|
|
<div class="flex flex-wrap items-center gap-2 lg:gap-3 print:hidden">
|
|
|
|
<button id="start-cooking-btn"
|
|
onclick="startCookingMode()"
|
|
class="px-3 lg:px-4 py-2 text-sm lg:text-base bg-gradient-to-r from-green-500 to-emerald-500 text-white rounded-lg hover:from-green-600 hover:to-emerald-600 transition-all shadow-md flex items-center gap-1.5 lg:gap-2 whitespace-nowrap print:hidden"
|
|
title="Start Cooking">
|
|
<svg class="w-4 h-4 lg:w-5 lg:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<span class="hidden lg:inline">Cook</span>
|
|
</button>
|
|
|
|
<a href="../recipe/saucisses.cook"
|
|
download
|
|
class="px-3 lg:px-4 py-2 text-sm lg:text-base bg-gradient-to-r from-gray-600 to-gray-700 text-white rounded-lg hover:from-gray-700 hover:to-gray-800 transition-all shadow-md flex items-center gap-1.5 lg:gap-2 whitespace-nowrap"
|
|
title="Download .cook source">
|
|
<svg class="w-4 h-4 lg:w-5 lg:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"></path>
|
|
</svg>
|
|
<span class="hidden lg:inline">.cook</span>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recipe info section -->
|
|
<div class="space-y-4">
|
|
<!-- Tags row -->
|
|
|
|
<div class="flex flex-wrap gap-2">
|
|
|
|
<span class="tag">#saucisse</span>
|
|
|
|
<span class="tag">#poêle</span>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Description if present -->
|
|
|
|
|
|
|
|
<!-- Metadata row -->
|
|
<div id="metadata-container" class="flex flex-wrap gap-3">
|
|
<!-- Display all metadata items -->
|
|
|
|
|
|
<span class="metadata-pill metadata-servings">👥 4 portions</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<span class="metadata-pill metadata-course">🍽️ plat</span>
|
|
|
|
|
|
|
|
<span class="metadata-pill metadata-prep">⏱️ Temps de Préparation: 15 minutes</span>
|
|
|
|
|
|
|
|
<span class="metadata-pill metadata-cook">🔥 Temps de Cuisson: 15 minutes</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Custom metadata -->
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-8 mb-8">
|
|
<div class="md:col-span-1">
|
|
<div class="bg-white rounded-2xl shadow-lg p-6">
|
|
<h2 class="text-xl font-bold mb-4 text-orange-600">🥘 Ingrédients</h2>
|
|
|
|
|
|
<!-- Fallback to original flat list for recipes without sections -->
|
|
<ul class="space-y-3">
|
|
|
|
<li class="flex justify-between items-center bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg px-3 py-2">
|
|
<div class="flex-1 flex items-center">
|
|
|
|
<span class="font-medium">chair à saucisse bœuf et porc</span>
|
|
|
|
|
|
|
|
</div>
|
|
<span class="text-orange-700 font-semibold ml-2">
|
|
450 g
|
|
|
|
</span>
|
|
</li>
|
|
|
|
<li class="flex justify-between items-center bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg px-3 py-2">
|
|
<div class="flex-1 flex items-center">
|
|
|
|
<span class="font-medium">ketchup</span>
|
|
|
|
|
|
|
|
</div>
|
|
<span class="text-orange-700 font-semibold ml-2">
|
|
|
|
|
|
</span>
|
|
</li>
|
|
|
|
<li class="flex justify-between items-center bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg px-3 py-2">
|
|
<div class="flex-1 flex items-center">
|
|
|
|
<span class="font-medium">moutarde</span>
|
|
|
|
|
|
|
|
</div>
|
|
<span class="text-orange-700 font-semibold ml-2">
|
|
|
|
|
|
</span>
|
|
</li>
|
|
|
|
<li class="flex justify-between items-center bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg px-3 py-2">
|
|
<div class="flex-1 flex items-center">
|
|
|
|
<span class="font-medium">pain à hot-dog</span>
|
|
|
|
|
|
|
|
</div>
|
|
<span class="text-orange-700 font-semibold ml-2">
|
|
|
|
|
|
</span>
|
|
</li>
|
|
|
|
<li class="flex justify-between items-center bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg px-3 py-2">
|
|
<div class="flex-1 flex items-center">
|
|
|
|
<span class="font-medium">paprika</span>
|
|
|
|
|
|
|
|
</div>
|
|
<span class="text-orange-700 font-semibold ml-2">
|
|
7 g
|
|
|
|
</span>
|
|
</li>
|
|
|
|
<li class="flex justify-between items-center bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg px-3 py-2">
|
|
<div class="flex-1 flex items-center">
|
|
|
|
<span class="font-medium">persil plat</span>
|
|
|
|
|
|
<span class="text-sm text-gray-600 italic ml-1 break-words" aria-label="préparation: ciselé">(ciselé)</span>
|
|
|
|
</div>
|
|
<span class="text-orange-700 font-semibold ml-2">
|
|
|
|
|
|
</span>
|
|
</li>
|
|
|
|
<li class="flex justify-between items-center bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg px-3 py-2">
|
|
<div class="flex-1 flex items-center">
|
|
|
|
<span class="font-medium">poivre</span>
|
|
|
|
|
|
|
|
</div>
|
|
<span class="text-orange-700 font-semibold ml-2">
|
|
|
|
|
|
</span>
|
|
</li>
|
|
|
|
<li class="flex justify-between items-center bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg px-3 py-2">
|
|
<div class="flex-1 flex items-center">
|
|
|
|
<span class="font-medium">salade</span>
|
|
|
|
|
|
|
|
</div>
|
|
<span class="text-orange-700 font-semibold ml-2">
|
|
|
|
|
|
</span>
|
|
</li>
|
|
|
|
<li class="flex justify-between items-center bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg px-3 py-2">
|
|
<div class="flex-1 flex items-center">
|
|
|
|
<span class="font-medium">salsa</span>
|
|
|
|
|
|
|
|
</div>
|
|
<span class="text-orange-700 font-semibold ml-2">
|
|
|
|
|
|
</span>
|
|
</li>
|
|
|
|
<li class="flex justify-between items-center bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg px-3 py-2">
|
|
<div class="flex-1 flex items-center">
|
|
|
|
<span class="font-medium">sel</span>
|
|
|
|
|
|
|
|
</div>
|
|
<span class="text-orange-700 font-semibold ml-2">
|
|
3 g
|
|
|
|
</span>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<h2 class="text-xl font-bold mt-6 mb-4 text-green-600">🍳 Ustensiles</h2>
|
|
<ul class="cookware-list space-y-2">
|
|
|
|
<li class="bg-gradient-to-r from-green-50 to-blue-50 rounded-lg px-3 py-2">
|
|
<span class="font-medium">saladier</span>
|
|
</li>
|
|
|
|
<li class="bg-gradient-to-r from-green-50 to-blue-50 rounded-lg px-3 py-2">
|
|
<span class="font-medium">bouteille en plastique d'1,5 L</span>
|
|
</li>
|
|
|
|
<li class="bg-gradient-to-r from-green-50 to-blue-50 rounded-lg px-3 py-2">
|
|
<span class="font-medium">pique à brochette</span>
|
|
</li>
|
|
|
|
<li class="bg-gradient-to-r from-green-50 to-blue-50 rounded-lg px-3 py-2">
|
|
<span class="font-medium">sauteuse</span>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md:col-span-2">
|
|
<div class="bg-white rounded-2xl shadow-lg p-6">
|
|
|
|
|
|
|
|
|
|
<ol class="space-y-4 ">
|
|
|
|
|
|
<li class="bg-gradient-to-r from-gray-50 to-orange-50 rounded-xl p-4">
|
|
<div class="flex flex-col gap-4">
|
|
|
|
|
|
<div class="flex gap-4">
|
|
<div class="step-number">1</div>
|
|
<div class="flex-1">
|
|
<div class="text-gray-700 mb-2 leading-8">
|
|
|
|
Dans un
|
|
<span class="cookware-badge">saladier</span>
|
|
, mélanger la
|
|
<span class="ingredient-badge">chair à saucisse bœuf et porc</span>
|
|
, le
|
|
<span class="ingredient-badge">sel</span>
|
|
, une pincée de
|
|
<span class="ingredient-badge">poivre</span>
|
|
, du
|
|
<span class="ingredient-badge">persil plat</span>
|
|
et le
|
|
<span class="ingredient-badge">paprika</span>
|
|
.
|
|
</div>
|
|
|
|
<div class="text-sm text-gray-600 mt-2 pl-4 border-l-2 border-orange-300">
|
|
|
|
<span class="inline-block mr-3">
|
|
chair à saucisse bœuf et porc: 450 g,
|
|
</span>
|
|
|
|
<span class="inline-block mr-3">
|
|
sel: 3 g,
|
|
</span>
|
|
|
|
<span class="inline-block mr-3">
|
|
poivre,
|
|
</span>
|
|
|
|
<span class="inline-block mr-3">
|
|
persil plat <span class="italic text-gray-600 break-words" aria-label="préparation: ciselé">(ciselé)</span>,
|
|
</span>
|
|
|
|
<span class="inline-block mr-3">
|
|
paprika: 7 g
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
|
|
|
|
<li class="bg-gradient-to-r from-gray-50 to-orange-50 rounded-xl p-4">
|
|
<div class="flex flex-col gap-4">
|
|
|
|
|
|
<div class="flex gap-4">
|
|
<div class="step-number">2</div>
|
|
<div class="flex-1">
|
|
<div class="text-gray-700 mb-2 leading-8">
|
|
|
|
Couper une
|
|
<span class="cookware-badge">bouteille en plastique d'1,5 L</span>
|
|
en deux : c'est le poussoir à saucisses.
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
|
|
|
|
<li class="bg-gradient-to-r from-gray-50 to-orange-50 rounded-xl p-4">
|
|
<div class="flex flex-col gap-4">
|
|
|
|
|
|
<div class="flex gap-4">
|
|
<div class="step-number">3</div>
|
|
<div class="flex-1">
|
|
<div class="text-gray-700 mb-2 leading-8">
|
|
|
|
Transvaser la farce dans la moitié haute de la bouteille. Planter une
|
|
<span class="cookware-badge">pique à brochette</span>
|
|
dans le goulot.
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
|
|
|
|
<li class="bg-gradient-to-r from-gray-50 to-orange-50 rounded-xl p-4">
|
|
<div class="flex flex-col gap-4">
|
|
|
|
|
|
<div class="flex gap-4">
|
|
<div class="step-number">4</div>
|
|
<div class="flex-1">
|
|
<div class="text-gray-700 mb-2 leading-8">
|
|
|
|
Retourner la moitié basse de la bouteille et l'enfoncer dans la partie ouverte, pour pousser la farce vers le goulot.
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
|
|
|
|
<li class="bg-gradient-to-r from-gray-50 to-orange-50 rounded-xl p-4">
|
|
<div class="flex flex-col gap-4">
|
|
|
|
|
|
<div class="flex gap-4">
|
|
<div class="step-number">5</div>
|
|
<div class="flex-1">
|
|
<div class="text-gray-700 mb-2 leading-8">
|
|
|
|
Chauffer une
|
|
<span class="cookware-badge">sauteuse</span>
|
|
à feu moyen et cuire les saucisses à cœur.
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
|
|
|
|
<li class="bg-gradient-to-r from-gray-50 to-orange-50 rounded-xl p-4">
|
|
<div class="flex flex-col gap-4">
|
|
|
|
|
|
<div class="flex gap-4">
|
|
<div class="step-number">6</div>
|
|
<div class="flex-1">
|
|
<div class="text-gray-700 mb-2 leading-8">
|
|
|
|
Garnir un
|
|
<span class="ingredient-badge">pain à hot-dog</span>
|
|
de
|
|
<span class="ingredient-badge">salade</span>
|
|
, ajouter de la
|
|
<span class="ingredient-badge">salsa</span>
|
|
, puis la saucisse, et enfin
|
|
<span class="ingredient-badge">ketchup</span>
|
|
et
|
|
<span class="ingredient-badge">moutarde</span>
|
|
selon l'envie.
|
|
</div>
|
|
|
|
<div class="text-sm text-gray-600 mt-2 pl-4 border-l-2 border-orange-300">
|
|
|
|
<span class="inline-block mr-3">
|
|
pain à hot-dog,
|
|
</span>
|
|
|
|
<span class="inline-block mr-3">
|
|
salade,
|
|
</span>
|
|
|
|
<span class="inline-block mr-3">
|
|
salsa,
|
|
</span>
|
|
|
|
<span class="inline-block mr-3">
|
|
ketchup,
|
|
</span>
|
|
|
|
<span class="inline-block mr-3">
|
|
moutarde
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
|
|
</ol>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script id="cooking-mode-data" type="application/json">
|
|
{"image":null,"name":"Saucisses maison","scale":1.0,"sections":[{"ingredients":[{"name":"persil plat","note":"ciselé","quantity":null,"unit":null},{"name":"salade","note":null,"quantity":null,"unit":null},{"name":"chair à saucisse bœuf et porc","note":null,"quantity":"450","unit":"g"},{"name":"pain à hot-dog","note":null,"quantity":null,"unit":null},{"name":"paprika","note":null,"quantity":"7","unit":"g"},{"name":"poivre","note":null,"quantity":null,"unit":null},{"name":"sel","note":null,"quantity":"3","unit":"g"},{"name":"ketchup","note":null,"quantity":null,"unit":null},{"name":"moutarde","note":null,"quantity":null,"unit":null},{"name":"salsa","note":null,"quantity":null,"unit":null}],"name":null,"stepOffset":0,"steps":[{"globalNumber":1,"image":null,"ingredients":[{"name":"chair à saucisse bœuf et porc","note":null,"quantity":"450","unit":"g"},{"name":"sel","note":null,"quantity":"3","unit":"g"},{"name":"poivre","note":null,"quantity":null,"unit":null},{"name":"persil plat","note":"ciselé","quantity":null,"unit":null},{"name":"paprika","note":null,"quantity":"7","unit":"g"}],"number":1,"type":"step"},{"globalNumber":2,"image":null,"ingredients":[],"number":2,"type":"step"},{"globalNumber":3,"image":null,"ingredients":[],"number":3,"type":"step"},{"globalNumber":4,"image":null,"ingredients":[],"number":4,"type":"step"},{"globalNumber":5,"image":null,"ingredients":[],"number":5,"type":"step"},{"globalNumber":6,"image":null,"ingredients":[{"name":"pain à hot-dog","note":null,"quantity":null,"unit":null},{"name":"salade","note":null,"quantity":null,"unit":null},{"name":"salsa","note":null,"quantity":null,"unit":null},{"name":"ketchup","note":null,"quantity":null,"unit":null},{"name":"moutarde","note":null,"quantity":null,"unit":null}],"number":6,"type":"step"}]}]}
|
|
</script>
|
|
|
|
|
|
|
|
</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>
|
|
|
|
|
|
<link rel="stylesheet" href="../static/css/cooking-mode.css">
|
|
<script src="../static/js/cooking-mode.js"></script>
|
|
|
|
</body>
|
|
</html> |