563 lines
18 KiB
HTML
563 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>🍳 Meine Rezeptsammlung</title>
|
||
<style>
|
||
:root {
|
||
--bg: #faf9f6;
|
||
--card: #ffffff;
|
||
--accent: #e85d3a;
|
||
--accent2: #f4a261;
|
||
--text: #2d2010;
|
||
--muted: #666;
|
||
--border: #e8e0d8;
|
||
}
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
line-height: 1.6;
|
||
}
|
||
header {
|
||
background: linear-gradient(135deg, var(--accent), var(--accent2));
|
||
color: #fff;
|
||
padding: 2.5rem 1rem;
|
||
text-align: center;
|
||
}
|
||
header h1 { font-size: 2rem; margin-bottom: .3rem; }
|
||
header p { opacity: .85; font-size: 1.05rem; }
|
||
.container { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem; }
|
||
|
||
/* Search & Filter */
|
||
.controls {
|
||
display: flex;
|
||
gap: .8rem;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 2rem;
|
||
}
|
||
.controls input, .controls select {
|
||
padding: .6rem 1rem;
|
||
border: 2px solid var(--border);
|
||
border-radius: 10px;
|
||
font-size: .95rem;
|
||
background: var(--card);
|
||
color: var(--text);
|
||
outline: none;
|
||
transition: border .2s;
|
||
}
|
||
.controls input:focus, .controls select:focus {
|
||
border-color: var(--accent);
|
||
}
|
||
.controls input { flex: 1; min-width: 200px; }
|
||
.controls select { min-width: 160px; cursor: pointer; }
|
||
|
||
/* Recipe Grid */
|
||
.recipes { display: grid; gap: 1.5rem; }
|
||
.recipe {
|
||
background: var(--card);
|
||
border-radius: 14px;
|
||
padding: 1.5rem;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,.06);
|
||
border: 1px solid var(--border);
|
||
transition: box-shadow .2s;
|
||
}
|
||
.recipe:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); }
|
||
.recipe-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
gap: 1rem;
|
||
margin-bottom: .8rem;
|
||
}
|
||
.recipe h2 { font-size: 1.25rem; color: var(--accent); }
|
||
.badge {
|
||
display: inline-block;
|
||
font-size: .7rem;
|
||
font-weight: 600;
|
||
padding: .2rem .5rem;
|
||
border-radius: 20px;
|
||
white-space: nowrap;
|
||
}
|
||
.badge-protein { background: #d4edda; color: #155724; }
|
||
.badge-vegetarisch { background: #fff3cd; color: #856404; }
|
||
.badge-fleisch { background: #f8d7da; color: #721c24; }
|
||
.badge-snack { background: #cce5ff; color: #004085; }
|
||
.badge-mealprep { background: #e2d5f0; color: #4a1a6b; }
|
||
.badge-sweet { background: #fce4ec; color: #880e4f; }
|
||
|
||
.meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: .6rem;
|
||
margin-bottom: 1rem;
|
||
font-size: .85rem;
|
||
color: var(--muted);
|
||
}
|
||
.meta span { background: #f0ebe4; padding: .15rem .5rem; border-radius: 6px; }
|
||
.recipe h3 {
|
||
font-size: .95rem;
|
||
margin: 1rem 0 .4rem;
|
||
color: var(--text);
|
||
border-bottom: 1px solid var(--border);
|
||
padding-bottom: .25rem;
|
||
}
|
||
.ingredients {
|
||
list-style: none;
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||
gap: .2rem .8rem;
|
||
margin-bottom: .8rem;
|
||
}
|
||
.ingredients li { font-size: .9rem; padding: .15rem 0; }
|
||
.ingredients li::before { content: "• "; color: var(--accent); font-weight: bold; }
|
||
.steps { padding-left: 1.2rem; margin-bottom: .8rem; }
|
||
.steps li { font-size: .9rem; margin-bottom: .3rem; }
|
||
.link {
|
||
display: inline-block;
|
||
margin-top: .5rem;
|
||
font-size: .85rem;
|
||
color: var(--accent);
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
}
|
||
.link:hover { text-decoration: underline; }
|
||
.nutrition {
|
||
background: #f0ebe4;
|
||
border-radius: 8px;
|
||
padding: .4rem .7rem;
|
||
font-size: .8rem;
|
||
display: inline-flex;
|
||
gap: .8rem;
|
||
flex-wrap: wrap;
|
||
margin-top: .5rem;
|
||
}
|
||
.nutrition strong { color: var(--accent); }
|
||
.count { text-align: center; color: var(--muted); font-size: .9rem; margin-bottom: .5rem; }
|
||
|
||
@media (max-width: 600px) {
|
||
header { padding: 1.5rem 1rem; }
|
||
header h1 { font-size: 1.5rem; }
|
||
.ingredients { grid-template-columns: 1fr; }
|
||
.recipe-header { flex-direction: column; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header>
|
||
<h1>🍳 Meine Rezeptsammlung</h1>
|
||
<p>12 Rezepte – High Protein, Low Carb & einfach lecker</p>
|
||
</header>
|
||
|
||
<div class="container">
|
||
<div class="controls">
|
||
<input type="text" id="search" placeholder="🔍 Suche nach Zutaten, Namen..." oninput="filterRecipes()">
|
||
<select id="category" onchange="filterRecipes()">
|
||
<option value="all">📋 Alle Kategorien</option>
|
||
<option value="Fleisch">🥩 Fleisch / Hähnchen</option>
|
||
<option value="Vegetarisch">🥦 Vegetarisch</option>
|
||
<option value="Snack">🥨 Snacks</option>
|
||
<option value="Sweet">🍰 Süßes / Dessert</option>
|
||
<option value="Mealprep">📦 Mealprep</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div id="count" class="count">12 Rezepte</div>
|
||
<div class="recipes" id="recipes"></div>
|
||
</div>
|
||
|
||
<script>
|
||
const recipes = [
|
||
{
|
||
name: "Mediterrane Chicken Pasta Salad",
|
||
badges: ["Fleisch", "Mealprep"],
|
||
meta: ["5 Portionen", "428 kcal", "39g Protein"],
|
||
category: ["Fleisch", "Mealprep"],
|
||
ingredients: [
|
||
"300g Pasta",
|
||
"500g Hähnchenbrust",
|
||
"125g Light Mozzarella",
|
||
"1 Gurke",
|
||
"250g Cherrytomaten",
|
||
"1 rote Paprika",
|
||
"große Handvoll Rucola",
|
||
"Salz, Pfeffer, italienische Kräuter"
|
||
],
|
||
dressing: "170g Skyr, Zitronensaft, Kräuter, Knoblauchpulver, etwas Wasser",
|
||
steps: [
|
||
"Koche die Pasta nach Packungsanweisung.",
|
||
"Schneide das Hähnchenbrustfilet und brate es durch.",
|
||
"Gemüse (Gurke, Tomaten, Paprika) klein schneiden.",
|
||
"Pasta, Hähnchen, Mozzarella, Gemüse und Rucola vermischen.",
|
||
"Dressing aus Skyr, Zitronensaft, Kräutern, Knoblauchpulver und Wasser anrühren und über den Salat geben."
|
||
],
|
||
link: "https://www.instagram.com/reel/DYztEzTsIL1/",
|
||
nutrition: "5 Portionen · 428 kcal · 39g Protein"
|
||
},
|
||
{
|
||
name: "Mango Chicken Rice Bowl",
|
||
badges: ["Fleisch", "Mealprep"],
|
||
meta: ["4 Portionen", "422 kcal", "36g Protein"],
|
||
category: ["Fleisch", "Mealprep"],
|
||
ingredients: [
|
||
"500g Hähnchenbrust",
|
||
"180g Jasminreis (roh)",
|
||
"1 große Mango",
|
||
"1 Gurke",
|
||
"2 Karotten",
|
||
"1 Zucchini",
|
||
"Frühlingszwiebeln",
|
||
"100ml Rama Creme fin 7%"
|
||
],
|
||
sauce: "3 EL Light Sweet Chili Sauce · 6 EL Sojasauce light · Limettensaft · Chili flakes · etwas Wasser",
|
||
steps: [
|
||
"Koche den Reis nach Packungsanweisung.",
|
||
"Schneide das Hähnchenbrustfilet und brate es durch.",
|
||
"Mango, Gurke, Karotten, Zucchini und Frühlingszwiebeln klein schneiden.",
|
||
"Reis, Hähnchen, Mango, Gemüse und Rama Creme vermischen.",
|
||
"Sauce aus Sweet Chili, Sojasauce, Limettensaft, Chili flakes und Wasser anrühren und darüber geben."
|
||
],
|
||
link: "https://www.instagram.com/reel/DYztEzTsIL1/",
|
||
nutrition: "4 Portionen · 422 kcal · 36g Protein"
|
||
},
|
||
{
|
||
name: "High Protein Erdbeerkuchenbowl",
|
||
badges: ["Sweet", "Vegetarisch"],
|
||
meta: ["4 Portionen", "411 kcal", "32g Protein"],
|
||
category: ["Sweet", "Vegetarisch"],
|
||
ingredients: [
|
||
"200g Mehl",
|
||
"40g Vanille Proteinpulver",
|
||
"2 Eier",
|
||
"150g Skyr",
|
||
"80ml Milch 1,5%",
|
||
"50g Erythrit",
|
||
"1 TL Backpulver",
|
||
"1 Becher Protein-Grieß",
|
||
"500g Erdbeeren",
|
||
"1 Päckchen roter Tortenguss"
|
||
],
|
||
steps: [
|
||
"Boden: Mehl, Proteinpulver, Eier, Skyr, Milch, Erythrit und Backpulver verrühren.",
|
||
"Bei 180°C ca. 20 Minuten backen und abkühlen lassen.",
|
||
"Mit Protein-Grieß bestreichen.",
|
||
"Erdbeeren darauf verteilen und Tortenguss darüber geben."
|
||
],
|
||
link: "https://www.instagram.com/reel/DYztEzTsIL1/",
|
||
nutrition: "4 Portionen · 411 kcal · 32g Protein"
|
||
},
|
||
{
|
||
name: "Pommes Currywurst zum Abnehmen",
|
||
badges: ["Fleisch"],
|
||
meta: ["1 Portion", "569 kcal", "27g Protein"],
|
||
category: ["Fleisch"],
|
||
ingredients: [
|
||
"4 Geflügel Bratwürste",
|
||
"600g Kartoffeln",
|
||
"250ml Cola Zero",
|
||
"½ Zwiebel",
|
||
"250ml passierte Tomaten",
|
||
"1 TL Senf",
|
||
"2 EL Tomatenmark",
|
||
"1 TL Balsamico hell",
|
||
"1 TL Öl",
|
||
"Salz, Cayennepfeffer, Paprikapulver, Currypulver"
|
||
],
|
||
steps: [
|
||
"Kartoffeln 20 Minuten bei 200°C Umluft backen.",
|
||
"Bratwurst etwa 15 Minuten bei 180°C in den AirFryer.",
|
||
"Für die Sauce: Zwiebel anbraten, Tomatenmark, passierte Tomaten, Cola Zero, Senf, Balsamico und Gewürze einrühren und köcheln lassen.",
|
||
"Currywurst mit Pommes anrichten und Sauce darüber geben."
|
||
],
|
||
link: "https://vm.tiktok.com/ZGdH7mLPA/",
|
||
nutrition: "1 Portion · 569 kcal · 27g Protein · 58g KH · 23,5g Fett"
|
||
},
|
||
{
|
||
name: "Maultaschen-Pfanne",
|
||
badges: ["Fleisch"],
|
||
meta: ["ca. 2 Portionen"],
|
||
category: ["Fleisch"],
|
||
ingredients: [
|
||
"500g Maultaschen",
|
||
"1 Zucchini",
|
||
"150g Cherrytomaten",
|
||
"2 Knoblauchzehen",
|
||
"½ Bund Petersilie",
|
||
"Öl zum Braten",
|
||
"1 EL Tomatenmark",
|
||
"200ml Kochsahne",
|
||
"Salz, Pfeffer"
|
||
],
|
||
steps: [
|
||
"Zucchini und Tomaten waschen und kleinschneiden.",
|
||
"Maultaschen in Streifen schneiden, Knoblauch und Petersilie fein hacken.",
|
||
"Öl in einer Pfanne erhitzen und Maultaschen darin knusprig braten.",
|
||
"Zucchini, Tomaten und Knoblauch dazugeben und mit anbraten.",
|
||
"Tomatenmark dazugeben und mit Kochsahne ablöschen.",
|
||
"Mit Salz, Pfeffer und Petersilie abschmecken."
|
||
],
|
||
link: "https://vm.tiktok.com/ZGdHkuVVA/",
|
||
nutrition: "ca. 2 Portionen"
|
||
},
|
||
{
|
||
name: "Cheesy Broccoli Bites",
|
||
badges: ["Vegetarisch", "Snack"],
|
||
meta: ["ca. 12 Bällchen"],
|
||
category: ["Vegetarisch", "Snack"],
|
||
ingredients: [
|
||
"1 Brokkoli",
|
||
"200g geriebener Mozzarella",
|
||
"1 Ei",
|
||
"2 EL Speisestärke",
|
||
"Salz, Pfeffer"
|
||
],
|
||
steps: [
|
||
"Brokkoli ganz fein hacken und kurz stehen lassen (Sulforaphan!).",
|
||
"Mozzarella, Ei, Speisestärke, Salz und Pfeffer zum Brokkoli geben und gut vermischen.",
|
||
"Kleine Bällchen formen und auf ein Backblech legen.",
|
||
"Bei 200°C für 15–20 Minuten backen, bis goldbraun.",
|
||
"Dazu passt ein Joghurt-Tahini-Dip."
|
||
],
|
||
link: "https://www.instagram.com/reel/DWeDkP1CJXC/",
|
||
nutrition: "Perfekt als Snack"
|
||
},
|
||
{
|
||
name: "Chicken Teriyaki mit Reis",
|
||
badges: ["Fleisch"],
|
||
meta: ["1 Portion", "743 kcal", "63g Protein"],
|
||
category: ["Fleisch"],
|
||
ingredients: [
|
||
"120g Reis (ungekocht)",
|
||
"400g Huhn",
|
||
"30g Stärke",
|
||
"200g Brokkoli",
|
||
"1 Zehe Knoblauch",
|
||
"5g Sesam",
|
||
"30g Lauchzwiebeln"
|
||
],
|
||
sauce: "Teriyaki: 4 EL Sojasoße · 1 EL Mirin (oder Reisessig) · 1 EL brauner Zucker",
|
||
steps: [
|
||
"Reis nach Packungsanweisung kochen.",
|
||
"Hähnchen in Stücke schneiden, in Stärke wenden und anbraten.",
|
||
"Brokkoli und Knoblauch mitbraten.",
|
||
"Sojasoße, Mirin und Zucker verrühren, in die Pfanne geben und eindicken lassen.",
|
||
"Mit Sesam und Lauchzwiebeln garnieren."
|
||
],
|
||
link: "https://vm.tiktok.com/ZGdu7C7N9/",
|
||
nutrition: "1 Portion · 743 kcal · 63g Protein · 97g KH · 8g Fett"
|
||
},
|
||
{
|
||
name: "Crispy Chili Peanut Udon Bowl",
|
||
badges: ["Vegetarisch"],
|
||
meta: ["1 Portion", "844 kcal", "56g Protein"],
|
||
category: ["Vegetarisch"],
|
||
ingredients: [
|
||
"400g Udon Nudeln",
|
||
"2 EL Chili Flocken",
|
||
"1 EL Knoblauchpulver",
|
||
"1 TL Kurkuma",
|
||
"1 TL Kreuzkümmel",
|
||
"65g Erdnussbutterpulver",
|
||
"ca. 100 ml Wasser",
|
||
"3 EL Sojasoße",
|
||
"Saft einer Limette",
|
||
"2 EL Ahornsirup",
|
||
"Lauchzwiebeln & Sesam zum Garnieren"
|
||
],
|
||
steps: [
|
||
"Nudeln nach Packungsangabe kochen.",
|
||
"Gewürze mit Erdnussbutterpulver und Wasser verrühren.",
|
||
"Sojasoße, Limettensaft und Ahornsirup hinzufügen.",
|
||
"So viel Nudelwasser ergänzen, bis eine cremige Konsistenz erreicht ist.",
|
||
"Nudeln dazugeben, gut verrühren und mit Lauchzwiebeln und Sesam garnieren."
|
||
],
|
||
link: "https://vm.tiktok.com/ZGdu7XnLk/",
|
||
nutrition: "1 Portion · 844 kcal · 56g Protein · 122g KH · 15g Fett"
|
||
},
|
||
{
|
||
name: "Hähnchen in Paprika-Sahne-Soße",
|
||
badges: ["Fleisch"],
|
||
meta: ["2 Portionen"],
|
||
category: ["Fleisch"],
|
||
ingredients: [
|
||
"2 Hähnchenbrüste",
|
||
"250 ml Creme Fine 7%",
|
||
"150 ml Hühnerbrühe",
|
||
"1 EL Paprikapulver",
|
||
"Salz, Pfeffer",
|
||
"Petersilie",
|
||
"Kartoffelbrei",
|
||
"Brokkoli",
|
||
"Knoblauch",
|
||
"etwas Mehl"
|
||
],
|
||
steps: [
|
||
"Hähnchen horizontal durchschneiden. Mit Mehl, Paprikapulver, Salz und Pfeffer würzen und in Öl anbraten.",
|
||
"Hähnchen aus der Pfanne nehmen. Knoblauch anbraten, mit Creme Fine ablöschen.",
|
||
"Hühnerbrühe dazugeben, Paprika, Salz und Pfeffer einrühren.",
|
||
"Hähnchen zurück in die Pfanne legen und köcheln lassen, bis die Sauce sämig ist.",
|
||
"Mit Kartoffelpüree und Brokkoli servieren."
|
||
],
|
||
link: "https://vm.tiktok.com/ZGdu7uHU1/",
|
||
nutrition: "2 Portionen"
|
||
},
|
||
{
|
||
name: "High Protein Gnocchi Pfanne",
|
||
badges: ["Fleisch"],
|
||
meta: ["2 Portionen", "~770 kcal", "~70g Protein"],
|
||
category: ["Fleisch"],
|
||
ingredients: [
|
||
"500g Gnocchi",
|
||
"400g Hähnchen",
|
||
"200g Frischkäse Balance",
|
||
"50g light Käse",
|
||
"1 Zwiebel",
|
||
"4 Knoblauchzehen",
|
||
"1-2 Hände Spinat",
|
||
"100g getrocknete Tomaten",
|
||
"250ml Hühnerbrühe",
|
||
"10g Butter",
|
||
"Salz, Pfeffer, Paprikapulver, Knoblauchpulver, Zwiebelpulver, italienische Kräuter"
|
||
],
|
||
steps: [
|
||
"Hähnchen würzen und in einer Pfanne anbraten.",
|
||
"Gnocchi, Zwiebel und Knoblauch dazugeben und mitbraten.",
|
||
"Getrocknete Tomaten, Spinat und Hühnerbrühe dazugeben.",
|
||
"Frischkäse und Butter unterrühren.",
|
||
"Erneut mit den gleichen Gewürzen abschmecken und servieren."
|
||
],
|
||
link: "https://vm.tiktok.com/ZGdu7nBYk/",
|
||
nutrition: "2 Portionen · ~770 kcal · ~70g Protein"
|
||
},
|
||
{
|
||
name: "High Protein Indisches Linsendal",
|
||
badges: ["Vegetarisch", "Mealprep"],
|
||
meta: ["7 Portionen", "Mealprep"],
|
||
category: ["Vegetarisch", "Mealprep"],
|
||
ingredients: [
|
||
"500g rote Linsen",
|
||
"500ml passierte Tomaten",
|
||
"2 EL Garam Masala",
|
||
"2 EL Rapsöl (ca. 28g)",
|
||
"1 TL Salz",
|
||
"1 TL Kurkuma-Pulver",
|
||
"1 TL Knoblauchpulver",
|
||
"50g frischer Ingwer",
|
||
"3 kleine Schalotten (90g)",
|
||
"2,8kg gekochter Parboiled Reis"
|
||
],
|
||
steps: [
|
||
"Linsen gründlich waschen und mit 1,3l Wasser kochen. Nach ca. 15 Minuten abgießen, Kochwasser auffangen.",
|
||
"Reis nach Packungsanweisung kochen.",
|
||
"Schalotten fein hacken und in Öl anbraten. Ingwer und Gewürze (Garam Masala, Salz, Kurkuma, Knoblauchpulver) einrühren und kurz andünsten.",
|
||
"Mit passierten Tomaten ablöschen und köcheln lassen.",
|
||
"Gekochte Linsen dazugeben. Bei zu fester Konsistenz etwas Linsenwasser ergänzen. Mit Salz und Pfeffer abschmecken.",
|
||
"In 7 Mealprepboxen zusammen mit dem Reis aufteilen."
|
||
],
|
||
link: "https://www.instagram.com/reel/DScnT4FjBD6/",
|
||
nutrition: "7 Portionen · Perfekt zum Vorkochen"
|
||
},
|
||
{
|
||
name: "Der beste Thunfisch Snack der Welt",
|
||
badges: ["Snack"],
|
||
meta: ["6 Nuggets", "706 kcal gesamt", "100g Protein"],
|
||
category: ["Snack"],
|
||
ingredients: [
|
||
"200g körniger Frischkäse Light",
|
||
"130g Thunfisch im eigenen Saft",
|
||
"2 Eier",
|
||
"100g Light Käse",
|
||
"50g Peperoni (mild oder pikant)",
|
||
"Knoblauchpulver, Paprika Edelsüß, Pizza-Gewürz, Salz"
|
||
],
|
||
steps: [
|
||
"Thunfisch und Peperoni gut ausdrücken – so wenig Flüssigkeit wie möglich.",
|
||
"Alle Zutaten in einer Schüssel gut vermengen.",
|
||
"6 XL Thunfisch-Nuggets formen.",
|
||
"Bei 200°C Ober-/Unterhitze ca. 25 Minuten backen.",
|
||
"Optional mit zuckerfreier Sauce servieren."
|
||
],
|
||
link: "https://www.instagram.com/reel/DPzYUz1CBfB/",
|
||
nutrition: "6 Nuggets · 706 kcal · 100g Protein · 28g KH · 8g Fett · Pro Nugget: 118 kcal · 17g Protein"
|
||
}
|
||
];
|
||
|
||
function getBadgeClass(badge) {
|
||
const map = {
|
||
"Fleisch": "badge-fleisch",
|
||
"Vegetarisch": "badge-vegetarisch",
|
||
"Snack": "badge-snack",
|
||
"Sweet": "badge-sweet",
|
||
"Mealprep": "badge-mealprep"
|
||
};
|
||
return map[badge] || "badge-protein";
|
||
}
|
||
|
||
function renderRecipes(list) {
|
||
const container = document.getElementById('recipes');
|
||
const count = document.getElementById('count');
|
||
if (list.length === 0) {
|
||
container.innerHTML = '<p style="text-align:center;color:#999;padding:2rem;">Keine Rezepte gefunden 😕</p>';
|
||
count.textContent = '0 Rezepte';
|
||
return;
|
||
}
|
||
count.textContent = list.length + ' Rezepte';
|
||
container.innerHTML = list.map(r => {
|
||
const badges = (r.badges || []).map(b => `<span class="badge ${getBadgeClass(b)}">${b}</span>`).join(' ');
|
||
const meta = (r.meta || []).map(m => `<span>${m}</span>`).join('');
|
||
const ingredients = r.ingredients.map(i => `<li>${i}</li>`).join('');
|
||
const steps = r.steps.map(s => `<li>${s}</li>`).join('');
|
||
const link = r.link ? `<a class="link" href="${r.link}" target="_blank">📸 Original-Rezept ansehen →</a>` : '';
|
||
const nutrition = r.nutrition ? `<div class="nutrition"><strong>Nährwerte:</strong> ${r.nutrition}</div>` : '';
|
||
const sauce = r.sauce ? `<p style="font-size:.9rem;margin-bottom:.5rem;color:var(--muted)"><strong>Sauce:</strong> ${r.sauce}</p>` : '';
|
||
const dressing = r.dressing ? `<p style="font-size:.9rem;margin-bottom:.5rem;color:var(--muted)"><strong>Dressing:</strong> ${r.dressing}</p>` : '';
|
||
|
||
return `
|
||
<div class="recipe">
|
||
<div class="recipe-header">
|
||
<h2>${r.name}</h2>
|
||
<div>${badges}</div>
|
||
</div>
|
||
${meta ? `<div class="meta">${meta}</div>` : ''}
|
||
<h3>📝 Zutaten</h3>
|
||
<ul class="ingredients">${ingredients}</ul>
|
||
${dressing}
|
||
${sauce}
|
||
<h3>👨🍳 Zubereitung</h3>
|
||
<ol class="steps">${steps}</ol>
|
||
${nutrition}
|
||
${link}
|
||
</div>
|
||
`;
|
||
}).join('');
|
||
}
|
||
|
||
function filterRecipes() {
|
||
const search = document.getElementById('search').value.toLowerCase().trim();
|
||
const category = document.getElementById('category').value;
|
||
|
||
let filtered = recipes;
|
||
|
||
if (search) {
|
||
filtered = filtered.filter(r =>
|
||
r.name.toLowerCase().includes(search) ||
|
||
r.ingredients.some(i => i.toLowerCase().includes(search)) ||
|
||
(r.badges || []).some(b => b.toLowerCase().includes(search))
|
||
);
|
||
}
|
||
|
||
if (category !== 'all') {
|
||
filtered = filtered.filter(r => r.category.includes(category));
|
||
}
|
||
|
||
renderRecipes(filtered);
|
||
}
|
||
|
||
renderRecipes(recipes);
|
||
</script>
|
||
</body>
|
||
</html>
|