Spaces:
Running
Running
Plan: Fruchtfolge-App (Standalone, mit eingebauten Daten) 1. Struktur der Anwendung Frontend (React oder React Native) Auswahlmenü für Gemüse (Dropdown + Suche) Button: „Fruchtfolgevorschlag“ Modal/Seite für Vorschläge (Gemüse oder Gründüngung) Bei Gründüngung: zusätzlich Dropdown für Bodenzustand Ergebnisanzeige: Vorschlag(e) + Begründung + Mischungsprozente Backend-Logik (eingebettet im Frontend oder als kleines Modul) Keine externe Datenbank Alle Gemüse-Infos + Gründüngungen + Regeln im Code als statische Listen / Objekte Einfacher Regel-Matcher: Gemüse-Vorschläge = andere Familie, anderer Nährstoffbedarf Gründüngung-Vorschläge = je nach Bodenzustand + Ziel (locker, N-Aufbau, Unkrautunterdrückung etc.) 2. Eingebaute Daten Gemüse (Beispiele für eine erste Version — ca. 25 Stück) const vegetables = [ { id: 1, name: "Tomate", family: "Solanaceae", nutrient: "stark", root: "tief" }, { id: 2, name: "Kartoffel", family: "Solanaceae", nutrient: "stark", root: "mittel" }, { id: 3, name: "Paprika", family: "Solanaceae", nutrient: "stark", root: "mittel" }, { id: 4, name: "Gurke", family: "Cucurbitaceae", nutrient: "stark", root: "flach" }, { id: 5, name: "Zucchini", family: "Cucurbitaceae", nutrient: "stark", root: "flach" }, { id: 6, name: "Karotte", family: "Apiaceae", nutrient: "mittel", root: "tief" }, { id: 7, name: "Sellerie", family: "Apiaceae", nutrient: "mittel", root: "tief" }, { id: 8, name: "Petersilie", family: "Apiaceae", nutrient: "schwach", root: "tief" }, { id: 9, name: "Kohl (Weißkohl)", family: "Brassicaceae", nutrient: "stark", root: "mittel" }, { id: 10, name: "Brokkoli", family: "Brassicaceae", nutrient: "stark", root: "mittel" }, { id: 11, name: "Radieschen", family: "Brassicaceae", nutrient: "schwach", root: "flach" }, { id: 12, name: "Salat", family: "Asteraceae", nutrient: "schwach", root: "flach" }, { id: 13, name: "Spinat", family: "Amaranthaceae", nutrient: "schwach", root: "flach" }, { id: 14, name: "Mangold", family: "Amaranthaceae", nutrient: "mittel", root: "flach" }, { id: 15, name: "Zwiebel", family: "Amaryllidaceae", nutrient: "mittel", root: "flach" }, { id: 16, name: "Lauch", family: "Amaryllidaceae", nutrient: "mittel", root: "tief" }, { id: 17, name: "Knoblauch", family: "Amaryllidaceae", nutrient: "mittel", root: "flach" }, { id: 18, name: "Bohne (Buschbohne)", family: "Fabaceae", nutrient: "schwach", root: "mittel" }, { id: 19, name: "Erbse", family: "Fabaceae", nutrient: "schwach", root: "mittel" }, { id: 20, name: "Ackerbohne", family: "Fabaceae", nutrient: "mittel", root: "tief" }, { id: 21, name: "Mais", family: "Poaceae", nutrient: "stark", root: "tief" }, { id: 22, name: "Kürbis", family: "Cucurbitaceae", nutrient: "stark", root: "flach" }, { id: 23, name: "Rote Bete", family: "Amaranthaceae", nutrient: "mittel", root: "tief" }, { id: 24, name: "Fenchel", family: "Apiaceae", nutrient: "mittel", root: "tief" }, { id: 25, name: "Kohlrabi", family: "Brassicaceae", nutrient: "mittel", root: "flach" } ]; Gründüngung (mit Eigenschaften) const greenManures = [ { id: 1, name: "Phacelia", traits: ["schnellwüchsig","unkrautunterdrückend","humusfördernd"], tolerances: ["locker","sandig","unkrautlastig"] }, { id: 2, name: "Buchweizen", traits: ["schnell","unkrautunterdrückend"], tolerances: ["locker","sandig","sauer"] }, { id: 3, name: "Ölrettich", traits: ["tiefwurzelnd","lockernd"], tolerances: ["verdichtet","lehmigtonig"] }, { id: 4, name: "Weißklee", traits: ["dauerhaft","N-Fixierer"], tolerances: ["locker","nährstoffarm"] }, { id: 5, name: "Rotklee", traits: ["N-Fixierer","humusfördernd"], tolerances: ["nährstoffarm","lehmigtonig"] }, { id: 6, name: "Perserklee", traits: ["kurzlebig","N-Fixierer"], tolerances: ["locker","sandig"] }, { id: 7, name: "Ackerbohne", traits: ["tiefwurzelnd","N-Fixierer"], tolerances: ["nährstoffarm","verdichtet"] }, { id: 8, name: "Wicke", traits: ["N-Fixierer"], tolerances: ["nährstoffarm"] }, { id: 9, name: "Hafer", traits: ["stützpflanze","biomasse"], tolerances: ["locker","sandig","unkrautlastig"] }, { id: 10, name: "Roggen", traits: ["winterhart","biomasse"], tolerances: ["lehmigtonig","sauer","nass"] }, { id: 11, name: "Lupine", traits: ["tiefwurzelnd","N-Fixierer"], tolerances: ["sandig","nährstoffarm"] }, { id: 12, name: "Senf", traits: ["schnellwüchsig","unkrautunterdrückend"], tolerances: ["unkrautlastig","locker"] } ]; Bodenzustände (fixe Liste) const soilStates = [ "Unbekannt", "locker humusreich", "stark verdichtet", "nährstoffarm", "nass", "staunässe", "sandig", "geringe Wasserhaltefähigkeit", "lehmigtonig", "sehr sauer", "unkrautlastig" ]; 3. Beispiel-Regeln (eingebaut im Code) Gemüse → Gemüse Keine gleiche Familie direkt nacheinander Starkzehrer → danach Schwach- oder Mittelzehrer Wechsel Flachwurzler ↔ Tiefwurzler bevorzugen Gemüse → Gründüngung Wenn „Gründung“ gewählt → schaue Bodenzustand: „verdichtet“ → Ölrettich + Lupine „sandig“ → Lupine + Buchweizen „unkrautlastig“ → Phacelia + Buchweizen oder Senf „nährstoffarm“ → Kleearten oder Wicke + Hafer (60/40 Mischung) „sehr sauer“ → Buchweizen oder Roggen „lehmigtonig“ → Roggen + Klee Mischung „staunässe“ → Hinweis: Gründüngung schwierig, Roggen bedingt möglich Standard („Unbekannt“) → Roggen + Klee (Allrounder) 4. Beispiel-Ablauf (in App) Nutzer wählt: Tomate Klick: Fruchtfolgevorschlag App zeigt: Gemüse: „Buschbohne (andere Familie, N-Fixierer, Schwachzehrer)“ Gründüngung: „Wicke + Hafer (60/40, N-Aufbau + Biomasse)“ Wenn Nutzer Gründung wählt → Dropdown „Bodenzustand“ → z. B. „verdichtet“ → Ergebnis: Ölrettich (20 %) + Lupine (80 %) Begründung: „Tiefwurzler lösen Verdichtungen, Lupine verbessert Nährstoffversorgung“ 5. Vorteile dieser Lösung Keine externe Datenbank nötig → läuft offline Alles (Gemüse, Gründüngung, Regeln) fix im Code eingebaut Leicht zu erweitern (nur neue Objekte in Arrays hinzufügen) - Initial Deployment
e34b0b3
verified
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Fruchtfolge-App</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .fade-in { | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .vegetable-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .green-manure-tag { | |
| transition: all 0.2s ease; | |
| } | |
| .green-manure-tag:hover { | |
| transform: scale(1.05); | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-green-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="mb-10 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-green-800 mb-2"> | |
| <i class="fas fa-leaf text-green-600 mr-2"></i>Fruchtfolge-App | |
| </h1> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| Finden Sie die perfekte Fruchtfolge für Ihren Garten basierend auf wissenschaftlichen Prinzipien | |
| </p> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="max-w-4xl mx-auto"> | |
| <!-- Selection Section --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <div class="flex flex-col md:flex-row gap-4 mb-6"> | |
| <div class="flex-1"> | |
| <label for="vegetable-select" class="block text-sm font-medium text-gray-700 mb-1"> | |
| <i class="fas fa-carrot text-orange-500 mr-1"></i> Gemüse auswählen | |
| </label> | |
| <div class="relative"> | |
| <select id="vegetable-select" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"> | |
| <option value="" disabled selected>Gemüse auswählen...</option> | |
| <!-- Options will be populated by JavaScript --> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <label for="soil-select" class="block text-sm font-medium text-gray-700 mb-1"> | |
| <i class="fas fa-seedling text-green-600 mr-1"></i> Bodenzustand (für Gründüngung) | |
| </label> | |
| <div class="relative"> | |
| <select id="soil-select" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"> | |
| <option value="Unbekannt" selected>Unbekannt (Standard)</option> | |
| <!-- Options will be populated by JavaScript --> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex flex-col sm:flex-row gap-3 justify-center"> | |
| <button id="vegetable-suggestion-btn" class="bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-6 rounded-lg transition flex items-center justify-center gap-2"> | |
| <i class="fas fa-lightbulb"></i> Gemüse-Vorschlag | |
| </button> | |
| <button id="manure-suggestion-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition flex items-center justify-center gap-2"> | |
| <i class="fas fa-spa"></i> Gründüngungs-Vorschlag | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Results Section --> | |
| <div id="results-section" class="hidden bg-white rounded-xl shadow-md p-6 mb-8 fade-in"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-2xl font-bold text-gray-800"> | |
| <i class="fas fa-clipboard-list text-green-600 mr-2"></i>Vorschläge | |
| </h2> | |
| <button id="clear-results" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> Zurücksetzen | |
| </button> | |
| </div> | |
| <div id="vegetable-results" class="mb-6 hidden"> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-3 flex items-center"> | |
| <i class="fas fa-carrot text-orange-500 mr-2"></i> Empfohlene Folgegemüse | |
| </h3> | |
| <div id="vegetable-suggestions" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <!-- Vegetable suggestions will be populated here --> | |
| </div> | |
| </div> | |
| <div id="manure-results" class="hidden"> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-3 flex items-center"> | |
| <i class="fas fa-spa text-green-500 mr-2"></i> Empfohlene Gründüngung | |
| </h3> | |
| <div id="manure-suggestions" class="space-y-4"> | |
| <!-- Green manure suggestions will be populated here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Information Section --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4"> | |
| <i class="fas fa-info-circle text-blue-500 mr-2"></i>Informationen | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-2">Warum Fruchtfolge?</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Eine gute Fruchtfolge verbessert die Bodengesundheit, reduziert Schädlinge und Krankheiten, und optimiert die Nährstoffnutzung. | |
| </p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Wechsel zwischen verschiedenen Pflanzenfamilien</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Abwechselnd starke und schwache Nährstoffzehrer</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Wechsel zwischen tief- und flachwurzelnden Pflanzen</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-2">Vorteile von Gründüngung</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Gründüngungspflanzen verbessern die Bodenstruktur, erhöhen den Humusgehalt und können Stickstoff binden. | |
| </p> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <span class="green-manure-tag bg-green-100 text-green-800 text-sm px-3 py-1 rounded-full flex items-center"> | |
| <i class="fas fa-lock-open text-green-600 mr-1"></i> Bodenlockerung | |
| </span> | |
| <span class="green-manure-tag bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full flex items-center"> | |
| <i class="fas fa-atom text-blue-600 mr-1"></i> N-Fixierung | |
| </span> | |
| <span class="green-manure-tag bg-purple-100 text-purple-800 text-sm px-3 py-1 rounded-full flex items-center"> | |
| <i class="fas fa-seedling text-purple-600 mr-1"></i> Unkrautunterdrückung | |
| </span> | |
| <span class="green-manure-tag bg-yellow-100 text-yellow-800 text-sm px-3 py-1 rounded-full flex items-center"> | |
| <i class="fas fa-layer-group text-yellow-600 mr-1"></i> Humusaufbau | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="mt-12 text-center text-gray-500 text-sm"> | |
| <p>© 2023 Fruchtfolge-App | Entwickelt für nachhaltige Landwirtschaft</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Data from the plan | |
| const vegetables = [ | |
| { id: 1, name: "Tomate", family: "Solanaceae", nutrient: "stark", root: "tief" }, | |
| { id: 2, name: "Kartoffel", family: "Solanaceae", nutrient: "stark", root: "mittel" }, | |
| { id: 3, name: "Paprika", family: "Solanaceae", nutrient: "stark", root: "mittel" }, | |
| { id: 4, name: "Gurke", family: "Cucurbitaceae", nutrient: "stark", root: "flach" }, | |
| { id: 5, name: "Zucchini", family: "Cucurbitaceae", nutrient: "stark", root: "flach" }, | |
| { id: 6, name: "Karotte", family: "Apiaceae", nutrient: "mittel", root: "tief" }, | |
| { id: 7, name: "Sellerie", family: "Apiaceae", nutrient: "mittel", root: "tief" }, | |
| { id: 8, name: "Petersilie", family: "Apiaceae", nutrient: "schwach", root: "tief" }, | |
| { id: 9, name: "Kohl (Weißkohl)", family: "Brassicaceae", nutrient: "stark", root: "mittel" }, | |
| { id: 10, name: "Brokkoli", family: "Brassicaceae", nutrient: "stark", root: "mittel" }, | |
| { id: 11, name: "Radieschen", family: "Brassicaceae", nutrient: "schwach", root: "flach" }, | |
| { id: 12, name: "Salat", family: "Asteraceae", nutrient: "schwach", root: "flach" }, | |
| { id: 13, name: "Spinat", family: "Amaranthaceae", nutrient: "schwach", root: "flach" }, | |
| { id: 14, name: "Mangold", family: "Amaranthaceae", nutrient: "mittel", root: "flach" }, | |
| { id: 15, name: "Zwiebel", family: "Amaryllidaceae", nutrient: "mittel", root: "flach" }, | |
| { id: 16, name: "Lauch", family: "Amaryllidaceae", nutrient: "mittel", root: "tief" }, | |
| { id: 17, name: "Knoblauch", family: "Amaryllidaceae", nutrient: "mittel", root: "flach" }, | |
| { id: 18, name: "Bohne (Buschbohne)", family: "Fabaceae", nutrient: "schwach", root: "mittel" }, | |
| { id: 19, name: "Erbse", family: "Fabaceae", nutrient: "schwach", root: "mittel" }, | |
| { id: 20, name: "Ackerbohne", family: "Fabaceae", nutrient: "mittel", root: "tief" }, | |
| { id: 21, name: "Mais", family: "Poaceae", nutrient: "stark", root: "tief" }, | |
| { id: 22, name: "Kürbis", family: "Cucurbitaceae", nutrient: "stark", root: "flach" }, | |
| { id: 23, name: "Rote Bete", family: "Amaranthaceae", nutrient: "mittel", root: "tief" }, | |
| { id: 24, name: "Fenchel", family: "Apiaceae", nutrient: "mittel", root: "tief" }, | |
| { id: 25, name: "Kohlrabi", family: "Brassicaceae", nutrient: "mittel", root: "flach" } | |
| ]; | |
| const greenManures = [ | |
| { id: 1, name: "Phacelia", traits: ["schnellwüchsig","unkrautunterdrückend","humusfördernd"], tolerances: ["locker","sandig","unkrautlastig"] }, | |
| { id: 2, name: "Buchweizen", traits: ["schnell","unkrautunterdrückend"], tolerances: ["locker","sandig","sauer"] }, | |
| { id: 3, name: "Ölrettich", traits: ["tiefwurzelnd","lockernd"], tolerances: ["verdichtet","lehmigtonig"] }, | |
| { id: 4, name: "Weißklee", traits: ["dauerhaft","N-Fixierer"], tolerances: ["locker","nährstoffarm"] }, | |
| { id: 5, name: "Rotklee", traits: ["N-Fixierer","humusfördernd"], tolerances: ["nährstoffarm","lehmigtonig"] }, | |
| { id: 6, name: "Perserklee", traits: ["kurzlebig","N-Fixierer"], tolerances: ["locker","sandig"] }, | |
| { id: 7, name: "Ackerbohne", traits: ["tiefwurzelnd","N-Fixierer"], tolerances: ["nährstoffarm","verdichtet"] }, | |
| { id: 8, name: "Wicke", traits: ["N-Fixierer"], tolerances: ["nährstoffarm"] }, | |
| { id: 9, name: "Hafer", traits: ["stützpflanze","biomasse"], tolerances: ["locker","sandig","unkrautlastig"] }, | |
| { id: 10, name: "Roggen", traits: ["winterhart","biomasse"], tolerances: ["lehmigtonig","sauer","nass"] }, | |
| { id: 11, name: "Lupine", traits: ["tiefwurzelnd","N-Fixierer"], tolerances: ["sandig","nährstoffarm"] }, | |
| { id: 12, name: "Senf", traits: ["schnellwüchsig","unkrautunterdrückend"], tolerances: ["unkrautlastig","locker"] } | |
| ]; | |
| const soilStates = [ | |
| "Unbekannt", "locker humusreich", "stark verdichtet", | |
| "nährstoffarm", "nass", "staunässe", | |
| "sandig", "geringe Wasserhaltefähigkeit", | |
| "lehmigtonig", "sehr sauer", "unkrautlastig" | |
| ]; | |
| // DOM Elements | |
| const vegetableSelect = document.getElementById('vegetable-select'); | |
| const soilSelect = document.getElementById('soil-select'); | |
| const vegetableSuggestionBtn = document.getElementById('vegetable-suggestion-btn'); | |
| const manureSuggestionBtn = document.getElementById('manure-suggestion-btn'); | |
| const resultsSection = document.getElementById('results-section'); | |
| const vegetableResults = document.getElementById('vegetable-results'); | |
| const manureResults = document.getElementById('manure-results'); | |
| const vegetableSuggestions = document.getElementById('vegetable-suggestions'); | |
| const manureSuggestions = document.getElementById('manure-suggestions'); | |
| const clearResults = document.getElementById('clear-results'); | |
| // Initialize the app | |
| function initApp() { | |
| // Populate vegetable dropdown | |
| vegetables.sort((a, b) => a.name.localeCompare(b.name)).forEach(veg => { | |
| const option = document.createElement('option'); | |
| option.value = veg.id; | |
| option.textContent = veg.name; | |
| vegetableSelect.appendChild(option); | |
| }); | |
| // Populate soil state dropdown | |
| soilStates.forEach(soil => { | |
| const option = document.createElement('option'); | |
| option.value = soil; | |
| option.textContent = soil; | |
| soilSelect.appendChild(option); | |
| }); | |
| // Add event listeners | |
| vegetableSuggestionBtn.addEventListener('click', getVegetableSuggestions); | |
| manureSuggestionBtn.addEventListener('click', getManureSuggestions); | |
| clearResults.addEventListener('click', resetApp); | |
| } | |
| // Get vegetable suggestions based on selected vegetable | |
| function getVegetableSuggestions() { | |
| const selectedVegId = vegetableSelect.value; | |
| if (!selectedVegId) { | |
| alert('Bitte wählen Sie zuerst ein Gemüse aus.'); | |
| return; | |
| } | |
| const selectedVegetable = vegetables.find(v => v.id == selectedVegId); | |
| const suggestions = []; | |
| // Rule 1: Different family | |
| // Rule 2: After strong nutrient demand, prefer weak or medium | |
| // Rule 3: Prefer alternating root depth | |
| vegetables.forEach(veg => { | |
| if (veg.id != selectedVegId) { | |
| let score = 0; | |
| let reasons = []; | |
| // Different family | |
| if (veg.family !== selectedVegetable.family) { | |
| score += 3; | |
| reasons.push(`andere Familie (${veg.family})`); | |
| } | |
| // Nutrient alternation | |
| if (selectedVegetable.nutrient === "stark" && (veg.nutrient === "schwach" || veg.nutrient === "mittel")) { | |
| score += 2; | |
| reasons.push(`${veg.nutrient}zehrer`); | |
| } else if (selectedVegetable.nutrient === "mittel" && veg.nutrient !== selectedVegetable.nutrient) { | |
| score += 1; | |
| reasons.push(`${veg.nutrient}zehrer`); | |
| } else if (selectedVegetable.nutrient === "schwach" && (veg.nutrient === "stark" || veg.nutrient === "mittel")) { | |
| score += 1; | |
| reasons.push(`${veg.nutrient}zehrer`); | |
| } | |
| // Root depth alternation | |
| if (veg.root !== selectedVegetable.root) { | |
| score += 1; | |
| reasons.push(`${veg.root === "tief" ? "tiefwurzelnd" : "flachwurzelnd"}`); | |
| } | |
| // Special case for legumes (N-Fixers) | |
| if (veg.family === "Fabaceae") { | |
| score += 1; | |
| reasons.push("N-Fixierer"); | |
| } | |
| if (score > 0) { | |
| suggestions.push({ | |
| vegetable: veg, | |
| score: score, | |
| reasons: reasons | |
| }); | |
| } | |
| } | |
| }); | |
| // Sort by score and take top 6 | |
| suggestions.sort((a, b) => b.score - a.score); | |
| const topSuggestions = suggestions.slice(0, 6); | |
| // Display results | |
| displayVegetableSuggestions(selectedVegetable, topSuggestions); | |
| } | |
| // Get green manure suggestions based on soil state | |
| function getManureSuggestions() { | |
| const selectedVegId = vegetableSelect.value; | |
| if (!selectedVegId) { | |
| alert('Bitte wählen Sie zuerst ein Gemüse aus.'); | |
| return; | |
| } | |
| const selectedVegetable = vegetables.find(v => v.id == selectedVegId); | |
| const soilState = soilSelect.value; | |
| let suggestions = []; | |
| // Apply rules based on soil state | |
| switch(soilState) { | |
| case "stark verdichtet": | |
| suggestions = [ | |
| { manure: greenManures.find(m => m.name === "Ölrettich"), percentage: 20 }, | |
| { manure: greenManures.find(m => m.name === "Lupine"), percentage: 80 } | |
| ]; | |
| break; | |
| case "sandig": | |
| suggestions = [ | |
| { manure: greenManures.find(m => m.name === "Lupine"), percentage: 70 }, | |
| { manure: greenManures.find(m => m.name === "Buchweizen"), percentage: 30 } | |
| ]; | |
| break; | |
| case "unkrautlastig": | |
| suggestions = [ | |
| { manure: greenManures.find(m => m.name === "Phacelia"), percentage: 50 }, | |
| { manure: greenManures.find(m => m.name === "Buchweizen"), percentage: 50 } | |
| ]; | |
| break; | |
| case "nährstoffarm": | |
| suggestions = [ | |
| { manure: greenManures.find(m => m.name === "Weißklee"), percentage: 60 }, | |
| { manure: greenManures.find(m => m.name === "Hafer"), percentage: 40 } | |
| ]; | |
| break; | |
| case "sehr sauer": | |
| suggestions = [ | |
| { manure: greenManures.find(m => m.name === "Buchweizen"), percentage: 100 } | |
| ]; | |
| break; | |
| case "lehmigtonig": | |
| suggestions = [ | |
| { manure: greenManures.find(m => m.name === "Roggen"), percentage: 60 }, | |
| { manure: greenManures.find(m => m.name === "Rotklee"), percentage: 40 } | |
| ]; | |
| break; | |
| case "nass": | |
| case "staunässe": | |
| suggestions = [ | |
| { manure: greenManures.find(m => m.name === "Roggen"), percentage: 100 } | |
| ]; | |
| break; | |
| default: // "Unbekannt" or others | |
| suggestions = [ | |
| { manure: greenManures.find(m => m.name === "Roggen"), percentage: 60 }, | |
| { manure: greenManures.find(m => m.name === "Weißklee"), percentage: 40 } | |
| ]; | |
| } | |
| // Display results | |
| displayManureSuggestions(selectedVegetable, suggestions, soilState); | |
| } | |
| // Display vegetable suggestions | |
| function displayVegetableSuggestions(selectedVegetable, suggestions) { | |
| // Show results section | |
| resultsSection.classList.remove('hidden'); | |
| vegetableResults.classList.remove('hidden'); | |
| manureResults.classList.add('hidden'); | |
| // Clear previous suggestions | |
| vegetableSuggestions.innerHTML = ''; | |
| // Add selected vegetable info | |
| const selectedCard = document.createElement('div'); | |
| selectedCard.className = 'bg-gray-100 p-4 rounded-lg border-l-4 border-green-500'; | |
| selectedCard.innerHTML = ` | |
| <h4 class="font-bold text-lg text-gray-800 mb-1">Aktuelles Gemüse</h4> | |
| <p class="text-gray-700 font-medium">${selectedVegetable.name}</p> | |
| <div class="flex flex-wrap gap-1 mt-2"> | |
| <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded">Familie: ${selectedVegetable.family}</span> | |
| <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded">${selectedVegetable.nutrient}zehrer</span> | |
| <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded">${selectedVegetable.root === "tief" ? "tiefwurzelnd" : selectedVegetable.root === "mittel" ? "mittelwurzelnd" : "flachwurzelnd"}</span> | |
| </div> | |
| `; | |
| vegetableSuggestions.appendChild(selectedCard); | |
| // Add suggestions | |
| suggestions.forEach(suggestion => { | |
| const veg = suggestion.vegetable; | |
| const card = document.createElement('div'); | |
| card.className = 'vegetable-card bg-white p-4 rounded-lg shadow border border-gray-100 hover:border-green-200 transition cursor-pointer'; | |
| card.innerHTML = ` | |
| <h4 class="font-bold text-lg text-gray-800 mb-1">${veg.name}</h4> | |
| <div class="flex flex-wrap gap-1 mb-2"> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Familie: ${veg.family}</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">${veg.nutrient}zehrer</span> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">${veg.root === "tief" ? "tiefwurzelnd" : veg.root === "mittel" ? "mittelwurzelnd" : "flachwurzelnd"}</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-2"><span class="font-medium">Gründe:</span> ${suggestion.reasons.join(', ')}</p> | |
| ${veg.family === "Fabaceae" ? '<p class="text-xs text-green-600 mt-1"><i class="fas fa-info-circle mr-1"></i>Diese Pflanze ist ein Stickstoff-Fixierer</p>' : ''} | |
| `; | |
| vegetableSuggestions.appendChild(card); | |
| }); | |
| // Scroll to results | |
| resultsSection.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| // Display green manure suggestions | |
| function displayManureSuggestions(selectedVegetable, suggestions, soilState) { | |
| // Show results section | |
| resultsSection.classList.remove('hidden'); | |
| vegetableResults.classList.add('hidden'); | |
| manureResults.classList.remove('hidden'); | |
| // Clear previous suggestions | |
| manureSuggestions.innerHTML = ''; | |
| // Add selected vegetable and soil info | |
| const infoCard = document.createElement('div'); | |
| infoCard.className = 'bg-gray-100 p-4 rounded-lg mb-4'; | |
| infoCard.innerHTML = ` | |
| <div class="flex flex-col md:flex-row justify-between gap-2"> | |
| <div> | |
| <h4 class="font-bold text-gray-800 mb-1">Aktuelles Gemüse</h4> | |
| <p class="text-gray-700">${selectedVegetable.name}</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800 mb-1">Bodenzustand</h4> | |
| <p class="text-gray-700">${soilState}</p> | |
| </div> | |
| </div> | |
| `; | |
| manureSuggestions.appendChild(infoCard); | |
| // Add explanation based on soil state | |
| let explanation = ""; | |
| switch(soilState) { | |
| case "stark verdichtet": | |
| explanation = "Tiefwurzelnde Pflanzen wie Ölrettich und Lupine können helfen, verdichtete Böden aufzulockern und die Bodenstruktur zu verbessern."; | |
| break; | |
| case "sandig": | |
| explanation = "Lupinen binden Stickstoff und verbessern die Bodenfruchtbarkeit, während Buchweizen schnell wächst und den Boden beschattet."; | |
| break; | |
| case "unkrautlastig": | |
| explanation = "Schnellwüchsige Pflanzen wie Phacelia und Buchweizen unterdrücken Unkraut durch schnelle Bodenbedeckung und Konkurrenz."; | |
| break; | |
| case "nährstoffarm": | |
| explanation = "Kleearten fixieren Stickstoff aus der Luft, während Hafer Biomasse liefert und den Humusgehalt erhöht."; | |
| break; | |
| case "sehr sauer": | |
| explanation = "Buchweizen toleriert saure Böden und kann helfen, den pH-Wert zu verbessern."; | |
| break; | |
| case "lehmigtonig": | |
| explanation = "Roggen durchwurzelt schwere Böden gut, während Klee Stickstoff bindet und die Bodenstruktur verbessert."; | |
| break; | |
| case "nass": | |
| case "staunässe": | |
| explanation = "Roggen ist eine der wenigen Gründüngungspflanzen, die mit nassen Bedingungen zurechtkommen."; | |
| break; | |
| default: | |
| explanation = "Eine Mischung aus Roggen und Klee ist ein guter Allrounder für die meisten Böden, verbessert die Struktur und erhöht den Stickstoffgehalt."; | |
| } | |
| const explanationCard = document.createElement('div'); | |
| explanationCard.className = 'bg-blue-50 p-4 rounded-lg border-l-4 border-blue-500 mb-4'; | |
| explanationCard.innerHTML = ` | |
| <h4 class="font-bold text-blue-800 mb-1"><i class="fas fa-lightbulb text-blue-600 mr-1"></i>Begründung</h4> | |
| <p class="text-blue-700">${explanation}</p> | |
| `; | |
| manureSuggestions.appendChild(explanationCard); | |
| // Add suggestions | |
| suggestions.forEach(suggestion => { | |
| const manure = suggestion.manure; | |
| const card = document.createElement('div'); | |
| card.className = 'bg-white p-4 rounded-lg shadow border border-gray-100 mb-2'; | |
| card.innerHTML = ` | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-bold text-lg text-gray-800">${manure.name} <span class="text-sm font-normal text-gray-500">(${suggestion.percentage}%)</span></h4> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">${suggestion.percentage}% der Mischung</span> | |
| </div> | |
| <div class="flex flex-wrap gap-1 mb-2"> | |
| ${manure.traits.map(trait => { | |
| let color = "gray"; | |
| let icon = "fa-seedling"; | |
| if (trait.includes("N-Fixierer")) { color = "blue"; icon = "fa-atom"; } | |
| else if (trait.includes("unkraut")) { color = "purple"; icon = "fa-ban"; } | |
| else if (trait.includes("tiefwurzelnd") || trait.includes("lockernd")) { color = "indigo"; icon = "fa-arrow-down"; } | |
| else if (trait.includes("humus")) { color = "yellow"; icon = "fa-layer-group"; } | |
| else if (trait.includes("schnell")) { color = "green"; icon = "fa-bolt"; } | |
| return `<span class="bg-${color}-100 text-${color}-800 text-xs px-2 py-1 rounded flex items-center"> | |
| <i class="fas ${icon} text-${color}-600 mr-1"></i>${trait} | |
| </span>`; | |
| }).join('')} | |
| </div> | |
| <p class="text-sm text-gray-600 mt-2"><span class="font-medium">Geeignet für:</span> ${manure.tolerances.join(', ')}</p> | |
| `; | |
| manureSuggestions.appendChild(card); | |
| }); | |
| // Scroll to results | |
| resultsSection.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| // Reset the app | |
| function resetApp() { | |
| vegetableSelect.selectedIndex = 0; | |
| soilSelect.selectedIndex = 0; | |
| resultsSection.classList.add('hidden'); | |
| vegetableResults.classList.add('hidden'); | |
| manureResults.classList.add('hidden'); | |
| } | |
| // Initialize the app when DOM is loaded | |
| document.addEventListener('DOMContentLoaded', initApp); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=UnSinnlos/fruchtfolge-app" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |