ibot/rezepte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rezeptsammlung – 12 Rezepte

Browse Source
This commit is contained in:
Hund 🐶
2026-07-03 23:11:35 +02:00
parent 96ded3a86a
commit e1c0aa29a9
1 changed files with 562 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+562
View File
@@ -0,0 +1,562 @@
<!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 &amp; 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>