Spaces:
Running
Running
Crea una app web que sirva para elaborar el menú semanaluna dieta equilibrada basada en la dieta de Judy Morgan para perros. Podrá distinguir entre perros pequeños, medianos y grandes. Energía alta, media y baja. Actividad diaria alta, media y baja. Macho y hembra. Cachorro, adolescente adulto y anciano. Calculará el equilibrio de nutrientes en función de las selecciones del usuario y establecerá las recetas del menú semanal contando con eso. UI sencilla con desplegables - Follow Up Deployment
b0109f5
verified
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dieta Canina Judy Morgan</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.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .nutrient-bar { | |
| transition: width 0.5s ease-in-out; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8 max-w-4xl"> | |
| <header class="text-center mb-8"> | |
| <h1 class="text-3xl md:text-4xl font-bold text-indigo-800 mb-2"> | |
| <i class="fas fa-paw mr-2"></i>Dieta Canina Judy Morgan | |
| </h1> | |
| <p class="text-gray-600">Crea un menú semanal equilibrado para tu perro</p> | |
| </header> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-8"> | |
| <h2 class="text-xl font-semibold text-indigo-700 mb-4">Datos de tu perro</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Tamaño del perro --> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Tamaño</label> | |
| <select id="size" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500"> | |
| <option value="" disabled selected>Selecciona el tamaño</option> | |
| <option value="small">Pequeño (1-10 kg)</option> | |
| <option value="medium">Mediano (11-25 kg)</option> | |
| <option value="large">Grande (26+ kg)</option> | |
| </select> | |
| </div> | |
| <!-- Edad del perro --> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Etapa de vida</label> | |
| <select id="age" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500"> | |
| <option value="" disabled selected>Selecciona la edad</option> | |
| <option value="puppy">Cachorro (0-1 año)</option> | |
| <option value="teen">Adolescente (1-2 años)</option> | |
| <option value="adult">Adulto (2-7 años)</option> | |
| <option value="senior">Anciano (7+ años)</option> | |
| </select> | |
| </div> | |
| <!-- Nivel de energía --> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Nivel de energía</label> | |
| <select id="energy" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500"> | |
| <option value="" disabled selected>Selecciona el nivel</option> | |
| <option value="high">Alta</option> | |
| <option value="medium">Media</option> | |
| <option value="low">Baja</option> | |
| </select> | |
| </div> | |
| <!-- Actividad diaria --> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Actividad diaria</label> | |
| <select id="activity" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500"> | |
| <option value="" disabled selected>Selecciona el nivel</option> | |
| <option value="high">Alta (2+ horas ejercicio)</option> | |
| <option value="medium">Media (1-2 horas ejercicio)</option> | |
| <option value="low">Baja (menos de 1 hora)</option> | |
| </select> | |
| </div> | |
| <!-- Sexo del perro --> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Sexo</label> | |
| <select id="gender" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500"> | |
| <option value="" disabled selected>Selecciona el sexo</option> | |
| <option value="male">Macho</option> | |
| <option value="female">Hembra</option> | |
| </select> | |
| </div> | |
| <!-- Condiciones especiales --> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Condiciones especiales</label> | |
| <select id="conditions" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500"> | |
| <option value="none" selected>Ninguna</option> | |
| <option value="allergies">Alergias alimentarias</option> | |
| <option value="overweight">Sobrepeso</option> | |
| <option value="kidney">Problemas renales</option> | |
| <option value="joint">Problemas articulares</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <button id="calculateBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105"> | |
| <i class="fas fa-calculator mr-2"></i>Calcular Menú | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Resultados - Oculto inicialmente --> | |
| <div id="results" class="hidden bg-white rounded-lg shadow-md p-6 mb-8 fade-in"> | |
| <h2 class="text-xl font-semibold text-indigo-700 mb-4">Recomendaciones nutricionales</h2> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-3">Balance nutricional ideal</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Proteínas</span> | |
| <span id="protein-percent" class="text-sm font-medium text-gray-700">--%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div id="protein-bar" class="nutrient-bar h-2.5 rounded-full bg-blue-600" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Grasas</span> | |
| <span id="fat-percent" class="text-sm font-medium text-gray-700">--%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div id="fat-bar" class="nutrient-bar h-2.5 rounded-full bg-yellow-500" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Carbohidratos</span> | |
| <span id="carbs-percent" class="text-sm font-medium text-gray-700">--%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div id="carbs-bar" class="nutrient-bar h-2.5 rounded-full bg-green-500" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Fibra</span> | |
| <span id="fiber-percent" class="text-sm font-medium text-gray-700">--%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div id="fiber-bar" class="nutrient-bar h-2.5 rounded-full bg-purple-500" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-3">Cantidad diaria recomendada</h3> | |
| <div class="bg-indigo-50 p-4 rounded-lg"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-bowl-food text-2xl text-indigo-600 mr-3"></i> | |
| <div> | |
| <p class="font-medium text-gray-800">Tu perro debería consumir aproximadamente:</p> | |
| <p id="daily-amount" class="text-xl font-bold text-indigo-700">-- gramos por día</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-800 mb-3">Menú semanal</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full bg-white border border-gray-200 rounded-lg"> | |
| <thead class="bg-gray-100"> | |
| <tr> | |
| <th class="py-2 px-4 border-b">Día</th> | |
| <th class="py-2 px-4 border-b">Desayuno</th> | |
| <th class="py-2 px-4 border-b">Cena</th> | |
| </tr> | |
| </thead> | |
| <tbody id="weekly-menu" class="divide-y divide-gray-200"> | |
| <!-- Aquí se generará el menú dinámicamente --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-4 bg-yellow-50 p-4 rounded-lg border border-yellow-200"> | |
| <div class="flex"> | |
| <i class="fas fa-lightbulb text-yellow-500 text-xl mr-3 mt-1"></i> | |
| <div> | |
| <h4 class="font-medium text-yellow-800 mb-1">Consejos de Judy Morgan</h4> | |
| <p id="tips" class="text-yellow-700">Selecciona las características de tu perro para obtener consejos personalizados.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="text-center text-gray-500 text-sm mt-12"> | |
| <p>Esta aplicación sigue los principios de la dieta natural para perros de la Dra. Judy Morgan.</p> | |
| <p class="mt-1">Consulta siempre con tu veterinario antes de cambiar la dieta de tu mascota.</p> | |
| </footer> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const calculateBtn = document.getElementById('calculateBtn'); | |
| const resultsSection = document.getElementById('results'); | |
| calculateBtn.addEventListener('click', function() { | |
| // Validar que todos los campos estén completos | |
| const size = document.getElementById('size').value; | |
| const age = document.getElementById('age').value; | |
| const energy = document.getElementById('energy').value; | |
| const activity = document.getElementById('activity').value; | |
| const gender = document.getElementById('gender').value; | |
| const conditions = document.getElementById('conditions').value; | |
| if (!size || !age || !energy || !activity || !gender) { | |
| alert('Por favor completa todos los campos obligatorios.'); | |
| return; | |
| } | |
| // Calcular recomendaciones basadas en las selecciones | |
| calculateRecommendations(size, age, energy, activity, gender, conditions); | |
| // Mostrar resultados con animación | |
| resultsSection.classList.remove('hidden'); | |
| resultsSection.classList.add('fade-in'); | |
| // Desplazarse suavemente a los resultados | |
| resultsSection.scrollIntoView({ behavior: 'smooth' }); | |
| }); | |
| function calculateRecommendations(size, age, energy, activity, gender, conditions) { | |
| // Base de datos de recetas | |
| const recipes = { | |
| breakfast: [ | |
| { name: "Pollo con calabaza y espinacas", protein: 40, fat: 20, carbs: 30, fiber: 10 }, | |
| { name: "Pavo con zanahoria y arroz integral", protein: 35, fat: 15, carbs: 40, fiber: 10 }, | |
| { name: "Salmón con boniato y judías verdes", protein: 30, fat: 25, carbs: 35, fiber: 10 }, | |
| { name: "Ternera con quinoa y brócoli", protein: 45, fat: 15, carbs: 30, fiber: 10 }, | |
| { name: "Hígado con patata dulce y guisantes", protein: 35, fat: 20, carbs: 35, fiber: 10 }, | |
| { name: "Pescado blanco con calabacín y mijo", protein: 40, fat: 10, carbs: 40, fiber: 10 }, | |
| { name: "Cordero con col rizada y cebada", protein: 30, fat: 25, carbs: 35, fiber: 10 } | |
| ], | |
| dinner: [ | |
| { name: "Pavo con arroz y espárragos", protein: 35, fat: 15, carbs: 40, fiber: 10 }, | |
| { name: "Pollo con patata y zanahoria", protein: 40, fat: 20, carbs: 30, fiber: 10 }, | |
| { name: "Sardinas con quinoa y espinacas", protein: 30, fat: 25, carbs: 35, fiber: 10 }, | |
| { name: "Conejo con calabaza y judías", protein: 45, fat: 15, carbs: 30, fiber: 10 }, | |
| { name: "Pescado azul con boniato y brócoli", protein: 35, fat: 20, carbs: 35, fiber: 10 }, | |
| { name: "Ternera con arroz integral y calabacín", protein: 40, fat: 10, carbs: 40, fiber: 10 }, | |
| { name: "Pollo con lentejas y coliflor", protein: 30, fat: 25, carbs: 35, fiber: 10 } | |
| ] | |
| }; | |
| // Determinar porcentajes nutricionales basados en las necesidades | |
| let proteinPercent, fatPercent, carbsPercent, fiberPercent; | |
| // Cachorros necesitan más proteína y grasa | |
| if (age === 'puppy') { | |
| proteinPercent = 40; | |
| fatPercent = 25; | |
| carbsPercent = 25; | |
| fiberPercent = 10; | |
| } | |
| // Perros senior necesitan menos grasa y más fibra | |
| else if (age === 'senior') { | |
| proteinPercent = 30; | |
| fatPercent = 15; | |
| carbsPercent = 35; | |
| fiberPercent = 20; | |
| } | |
| // Perros con alta energía y actividad necesitan más carbohidratos | |
| else if (energy === 'high' && activity === 'high') { | |
| proteinPercent = 35; | |
| fatPercent = 20; | |
| carbsPercent = 35; | |
| fiberPercent = 10; | |
| } | |
| // Perros con sobrepeso necesitan menos grasa y carbohidratos | |
| else if (conditions === 'overweight') { | |
| proteinPercent = 40; | |
| fatPercent = 15; | |
| carbsPercent = 25; | |
| fiberPercent = 20; | |
| } | |
| // Perros con problemas renales necesitan menos proteína | |
| else if (conditions === 'kidney') { | |
| proteinPercent = 25; | |
| fatPercent = 25; | |
| carbsPercent = 40; | |
| fiberPercent = 10; | |
| } | |
| // Perros con problemas articulares necesitan más ácidos grasos | |
| else if (conditions === 'joint') { | |
| proteinPercent = 30; | |
| fatPercent = 30; | |
| carbsPercent = 30; | |
| fiberPercent = 10; | |
| } | |
| // Perros normales | |
| else { | |
| proteinPercent = 35; | |
| fatPercent = 20; | |
| carbsPercent = 35; | |
| fiberPercent = 10; | |
| } | |
| // Calcular cantidad diaria basada en tamaño y actividad | |
| let dailyAmount; | |
| if (size === 'small') { | |
| dailyAmount = energy === 'high' ? 150 : (energy === 'medium' ? 120 : 100); | |
| } else if (size === 'medium') { | |
| dailyAmount = energy === 'high' ? 350 : (energy === 'medium' ? 300 : 250); | |
| } else { // large | |
| dailyAmount = energy === 'high' ? 600 : (energy === 'medium' ? 500 : 400); | |
| } | |
| // Ajustar por edad | |
| if (age === 'puppy') dailyAmount *= 1.2; | |
| if (age === 'senior') dailyAmount *= 0.9; | |
| // Ajustar por condiciones | |
| if (conditions === 'overweight') dailyAmount *= 0.8; | |
| // Actualizar la UI con los resultados | |
| updateNutritionBars(proteinPercent, fatPercent, carbsPercent, fiberPercent); | |
| document.getElementById('protein-percent').textContent = proteinPercent + '%'; | |
| document.getElementById('fat-percent').textContent = fatPercent + '%'; | |
| document.getElementById('carbs-percent').textContent = carbsPercent + '%'; | |
| document.getElementById('fiber-percent').textContent = fiberPercent + '%'; | |
| document.getElementById('daily-amount').textContent = Math.round(dailyAmount) + ' gramos por día'; | |
| // Generar menú semanal | |
| generateWeeklyMenu(recipes); | |
| // Mostrar consejos personalizados | |
| showPersonalizedTips(size, age, energy, activity, gender, conditions); | |
| } | |
| function updateNutritionBars(protein, fat, carbs, fiber) { | |
| setTimeout(() => { | |
| document.getElementById('protein-bar').style.width = protein + '%'; | |
| document.getElementById('fat-bar').style.width = fat + '%'; | |
| document.getElementById('carbs-bar').style.width = carbs + '%'; | |
| document.getElementById('fiber-bar').style.width = fiber + '%'; | |
| }, 100); | |
| } | |
| function generateWeeklyMenu(recipes) { | |
| const weeklyMenu = document.getElementById('weekly-menu'); | |
| weeklyMenu.innerHTML = ''; | |
| const days = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo']; | |
| for (let i = 0; i < 7; i++) { | |
| const row = document.createElement('tr'); | |
| const dayCell = document.createElement('td'); | |
| dayCell.className = 'py-2 px-4 border-b text-center font-medium'; | |
| dayCell.textContent = days[i]; | |
| const breakfastCell = document.createElement('td'); | |
| breakfastCell.className = 'py-2 px-4 border-b'; | |
| breakfastCell.textContent = recipes.breakfast[i].name; | |
| const dinnerCell = document.createElement('td'); | |
| dinnerCell.className = 'py-2 px-4 border-b'; | |
| dinnerCell.textContent = recipes.dinner[i].name; | |
| row.appendChild(dayCell); | |
| row.appendChild(breakfastCell); | |
| row.appendChild(dinnerCell); | |
| weeklyMenu.appendChild(row); | |
| } | |
| } | |
| function showPersonalizedTips(size, age, energy, activity, gender, conditions) { | |
| const tipsElement = document.getElementById('tips'); | |
| let tips = []; | |
| // Tips basados en tamaño | |
| if (size === 'small') { | |
| tips.push("Los perros pequeños tienen metabolismos más rápidos, por lo que necesitan comidas más frecuentes pero en porciones pequeñas."); | |
| } else if (size === 'large') { | |
| tips.push("Los perros grandes son propensos a problemas articulares, considera añadir suplementos de glucosamina y condroitina."); | |
| } | |
| // Tips basados en edad | |
| if (age === 'puppy') { | |
| tips.push("Los cachorros necesitan más proteínas y grasas para su crecimiento. Alimenta 3-4 veces al día."); | |
| } else if (age === 'senior') { | |
| tips.push("Los perros senior se benefician de comidas más fáciles de digerir y con más fibra para la salud intestinal."); | |
| } | |
| // Tips basados en energía y actividad | |
| if (energy === 'high' && activity === 'high') { | |
| tips.push("Para perros muy activos, considera añadir carbohidratos complejos como fuente de energía sostenida."); | |
| } else if (energy === 'low' && activity === 'low') { | |
| tips.push("Los perros con baja actividad necesitan menos calorías para evitar el aumento de peso."); | |
| } | |
| // Tips basados en condiciones especiales | |
| if (conditions === 'allergies') { | |
| tips.push("Para perros con alergias, usa proteínas novedosas como conejo o venado y evita ingredientes comunes como pollo o trigo."); | |
| } else if (conditions === 'overweight') { | |
| tips.push("Para perros con sobrepeso, aumenta la fibra para promover la saciedad y reduce las grasas y carbohidratos."); | |
| } else if (conditions === 'kidney') { | |
| tips.push("Para problemas renales, reduce el fósforo y la proteína, pero mantén la proteína de alta calidad."); | |
| } else if (conditions === 'joint') { | |
| tips.push("Para problemas articulares, aumenta los ácidos grasos omega-3 que tienen propiedades antiinflamatorias."); | |
| } | |
| // Consejo general de Judy Morgan | |
| tips.push("Recuerda variar las proteínas cada 3-4 meses para proporcionar una nutrición equilibrada y prevenir alergias."); | |
| tipsElement.textContent = tips.join(' '); | |
| } | |
| }); | |
| </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=xSerpicoxx/prd" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |