Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Programme Nutritionnel pour Rondier Intervenant</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; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .nutrition-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .progress-bar { | |
| transition: width 0.6s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold text-blue-800 mb-3">Programme Nutritionnel Sur Mesure</h1> | |
| <p class="text-xl text-gray-600">Pour un rondier intervenant de 64 ans</p> | |
| <div class="mt-6 bg-blue-100 border-l-4 border-blue-800 p-4 text-left max-w-2xl mx-auto"> | |
| <p class="text-blue-800 font-medium"><i class="fas fa-info-circle mr-2"></i>Ce programme tient compte de vos besoins énergétiques, de votre activité physique et des spécificités liées à votre âge.</p> | |
| </div> | |
| </header> | |
| <!-- User Profile --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8 fade-in"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/4 flex justify-center mb-4 md:mb-0"> | |
| <div class="w-32 h-32 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-user text-5xl text-blue-600"></i> | |
| </div> | |
| </div> | |
| <div class="md:w-3/4 text-center md:text-left"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-2">Profil Nutritionnel</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4"> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="text-sm text-gray-500">Âge</p> | |
| <p class="font-bold">64 ans</p> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="text-sm text-gray-500">Activité</p> | |
| <p class="font-bold">Rondier intervenant</p> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="text-sm text-gray-500">Besoins</p> | |
| <p class="font-bold">2200-2500 kcal/jour</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Nutrition Plan --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <!-- Macronutrients --> | |
| <div class="bg-white rounded-xl shadow-md p-6 fade-in"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-chart-pie text-blue-600 mr-2"></i> Répartition des Macronutriments | |
| </h3> | |
| <div class="mb-4"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Protéines</span> | |
| <span class="text-sm font-medium text-gray-700">25%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full progress-bar" style="width: 25%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Glucides</span> | |
| <span class="text-sm font-medium text-gray-700">45%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-500 h-2.5 rounded-full progress-bar" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Lipides</span> | |
| <span class="text-sm font-medium text-gray-700">30%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-yellow-500 h-2.5 rounded-full progress-bar" style="width: 30%"></div> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-4"><i class="fas fa-lightbulb text-yellow-500 mr-1"></i> Cette répartition favorise l'énergie durable et la préservation musculaire.</p> | |
| </div> | |
| <!-- Key Recommendations --> | |
| <div class="bg-white rounded-xl shadow-md p-6 fade-in"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-star text-yellow-500 mr-2"></i> Recommandations Clés | |
| </h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Hydratation : 2L d'eau minimum par jour</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Protéines à chaque repas pour la masse musculaire</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Fibres pour le transit et la satiété</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Oméga-3 pour les articulations et le cœur</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Limiter le sel pour la tension artérielle</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Supplements --> | |
| <div class="bg-white rounded-xl shadow-md p-6 fade-in"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-pills text-purple-600 mr-2"></i> Compléments Utiles | |
| </h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-bone text-purple-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Vitamine D + Calcium</p> | |
| <p class="text-sm text-gray-600">Pour la santé osseuse</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-fish text-blue-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Oméga-3</p> | |
| <p class="text-sm text-gray-600">Anti-inflammatoire naturel</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-heart text-green-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Magnésium</p> | |
| <p class="text-sm text-gray-600">Pour l'énergie et la récupération</p> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-4">* À prendre sous contrôle médical</p> | |
| </div> | |
| </div> | |
| <!-- Daily Meal Plan --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8 fade-in"> | |
| <div class="bg-blue-800 text-white px-6 py-4"> | |
| <h2 class="text-2xl font-bold flex items-center"> | |
| <i class="fas fa-utensils mr-3"></i> Programme Journalier Type | |
| </h2> | |
| </div> | |
| <div class="p-6"> | |
| <!-- Breakfast --> | |
| <div class="mb-8 pb-6 border-b border-gray-200"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-100 text-yellow-800 flex items-center justify-center mr-3"> | |
| <i class="fas fa-sun"></i> | |
| </div> | |
| Petit-déjeuner (7h-8h) | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="nutrition-card bg-yellow-50 p-4 rounded-lg transition-all duration-300"> | |
| <h4 class="font-bold text-yellow-800 mb-2"><i class="fas fa-bread-slice mr-2"></i>Pain complet</h4> | |
| <p class="text-sm">2 tranches (80g) avec beurre ou purée d'amande</p> | |
| </div> | |
| <div class="nutrition-card bg-blue-50 p-4 rounded-lg transition-all duration-300"> | |
| <h4 class="font-bold text-blue-800 mb-2"><i class="fas fa-egg mr-2"></i>Protéines</h4> | |
| <p class="text-sm">2 œufs à la coque ou 1 yaourt grec nature</p> | |
| </div> | |
| <div class="nutrition-card bg-green-50 p-4 rounded-lg transition-all duration-300"> | |
| <h4 class="font-bold text-green-800 mb-2"><i class="fas fa-apple-alt mr-2"></i>Fruit</h4> | |
| <p class="text-sm">1 fruit de saison (ex: banane ou pomme)</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 bg-gray-50 p-3 rounded-lg"> | |
| <p class="text-sm text-gray-700"><i class="fas fa-mug-hot text-gray-500 mr-2"></i>Boisson : Thé vert ou café léger + grande verre d'eau</p> | |
| </div> | |
| </div> | |
| <!-- Lunch --> | |
| <div class="mb-8 pb-6 border-b border-gray-200"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-orange-100 text-orange-800 flex items-center justify-center mr-3"> | |
| <i class="fas fa-sun"></i> | |
| </div> | |
| Déjeuner (12h-13h) | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="nutrition-card bg-green-50 p-4 rounded-lg transition-all duration-300"> | |
| <h4 class="font-bold text-green-800 mb-2"><i class="fas fa-leaf mr-2"></i>Légumes</h4> | |
| <p class="text-sm">Crudités ou légumes cuits (200g minimum)</p> | |
| </div> | |
| <div class="nutrition-card bg-red-50 p-4 rounded-lg transition-all duration-300"> | |
| <h4 class="font-bold text-red-800 mb-2"><i class="fas fa-drumstick-bite mr-2"></i>Protéines</h4> | |
| <p class="text-sm">Viande maigre (150g) ou poisson gras (200g) 2x/semaine</p> | |
| </div> | |
| <div class="nutrition-card bg-yellow-50 p-4 rounded-lg transition-all duration-300"> | |
| <h4 class="font-bold text-yellow-800 mb-2"><i class="fas fa-seedling mr-2"></i>Féculents</h4> | |
| <p class="text-sm">Riz complet, quinoa ou patate douce (100g cuits)</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 bg-gray-50 p-3 rounded-lg"> | |
| <p class="text-sm text-gray-700"><i class="fas fa-cheese text-gray-500 mr-2"></i>Option : 1 portion de fromage ou 1 yaourt</p> | |
| </div> | |
| <div class="mt-2 bg-blue-50 p-3 rounded-lg"> | |
| <p class="text-sm text-blue-700"><i class="fas fa-glass-whiskey text-blue-500 mr-2"></i>Boisson : Eau plate ou gazeuse, éventuellement 1 verre de vin rouge</p> | |
| </div> | |
| </div> | |
| <!-- Snack --> | |
| <div class="mb-8 pb-6 border-b border-gray-200"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-amber-100 text-amber-800 flex items-center justify-center mr-3"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| Collation (16h-17h) | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="nutrition-card bg-purple-50 p-4 rounded-lg transition-all duration-300"> | |
| <h4 class="font-bold text-purple-800 mb-2"><i class="fas fa-seedling mr-2"></i>Option 1</h4> | |
| <p class="text-sm">Fruits secs (noix, amandes) + 1 fruit frais</p> | |
| </div> | |
| <div class="nutrition-card bg-pink-50 p-4 rounded-lg transition-all duration-300"> | |
| <h4 class="font-bold text-pink-800 mb-2"><i class="fas fa-bread-slice mr-2"></i>Option 2</h4> | |
| <p class="text-sm">Tartine de pain complet avec fromage frais</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 bg-green-50 p-3 rounded-lg"> | |
| <p class="text-sm text-green-700"><i class="fas fa-mug-hot text-green-500 mr-2"></i>Boisson : Tisane ou grand verre d'eau</p> | |
| </div> | |
| </div> | |
| <!-- Dinner --> | |
| <div class="mb-4"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 text-indigo-800 flex items-center justify-center mr-3"> | |
| <i class="fas fa-moon"></i> | |
| </div> | |
| Dîner (20h-21h) | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="nutrition-card bg-green-50 p-4 rounded-lg transition-all duration-300"> | |
| <h4 class="font-bold text-green-800 mb-2"><i class="fas fa-carrot mr-2"></i>Légumes</h4> | |
| <p class="text-sm">Soupe maison ou légumes cuits (200g minimum)</p> | |
| </div> | |
| <div class="nutrition-card bg-teal-50 p-4 rounded-lg transition-all duration-300"> | |
| <h4 class="font-bold text-teal-800 mb-2"><i class="fas fa-fish mr-2"></i>Protéines</h4> | |
| <p class="text-sm">Poisson blanc, œufs ou viande blanche (120g)</p> | |
| </div> | |
| <div class="nutrition-card bg-amber-50 p-4 rounded-lg transition-all duration-300"> | |
| <h4 class="font-bold text-amber-800 mb-2"><i class="fas fa-bread-slice mr-2"></i>Féculents</h4> | |
| <p class="text-sm">Petite portion de féculents complets (50g cuits) ou légumineuses</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 bg-gray-50 p-3 rounded-lg"> | |
| <p class="text-sm text-gray-700"><i class="fas fa-ice-cream text-gray-500 mr-2"></i>Option : Compote sans sucre ajouté ou 1 yaourt</p> | |
| </div> | |
| <div class="mt-2 bg-blue-50 p-3 rounded-lg"> | |
| <p class="text-sm text-blue-700"><i class="fas fa-glass-whiskey text-blue-500 mr-2"></i>Boisson : Eau plate ou tisane relaxante</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Additional Tips --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <div class="bg-white rounded-xl shadow-md p-6 fade-in"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-running text-red-500 mr-2"></i> Conseils pour les Jours d'Intervention | |
| </h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <div class="bg-red-100 p-1 rounded-full mr-3"> | |
| <i class="fas fa-check text-red-500 text-xs"></i> | |
| </div> | |
| <span>Prévoir des collations pratiques (fruits secs, barres protéinées maison)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-red-100 p-1 rounded-full mr-3"> | |
| <i class="fas fa-check text-red-500 text-xs"></i> | |
| </div> | |
| <span>Boire régulièrement même sans soif</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-red-100 p-1 rounded-full mr-3"> | |
| <i class="fas fa-check text-red-500 text-xs"></i> | |
| </div> | |
| <span>Repas plus riche en glucides complexes la veille des longues journées</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-red-100 p-1 rounded-full mr-3"> | |
| <i class="fas fa-check text-red-500 text-xs"></i> | |
| </div> | |
| <span>Bannir les plats trop gras qui alourdissent</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 fade-in"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-heartbeat text-pink-500 mr-2"></i> Aliments à Privilégier | |
| </h3> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div class="bg-pink-50 p-2 rounded-lg text-center"> | |
| <p class="font-medium text-pink-800">Poissons gras</p> | |
| <p class="text-xs">Saumon, maquereau</p> | |
| </div> | |
| <div class="bg-green-50 p-2 rounded-lg text-center"> | |
| <p class="font-medium text-green-800">Légumes verts</p> | |
| <p class="text-xs">Épinards, brocolis</p> | |
| </div> | |
| <div class="bg-yellow-50 p-2 rounded-lg text-center"> | |
| <p class="font-medium text-yellow-800">Céréales complètes</p> | |
| <p class="text-xs">Quinoa, riz brun</p> | |
| </div> | |
| <div class="bg-blue-50 p-2 rounded-lg text-center"> | |
| <p class="font-medium text-blue-800">Produits laitiers</p> | |
| <p class="text-xs">Yaourt grec, fromage blanc</p> | |
| </div> | |
| <div class="bg-purple-50 p-2 rounded-lg text-center"> | |
| <p class="font-medium text-purple-800">Fruits rouges</p> | |
| <p class="text-xs">Myrtilles, framboises</p> | |
| </div> | |
| <div class="bg-red-50 p-2 rounded-lg text-center"> | |
| <p class="font-medium text-red-800">Viandes maigres</p> | |
| <p class="text-xs">Poulet, dinde</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Download Button --> | |
| <div class="text-center mb-12 fade-in"> | |
| <button id="downloadBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full transition duration-300 transform hover:scale-105 shadow-lg"> | |
| <i class="fas fa-download mr-2"></i> Télécharger ce Programme | |
| </button> | |
| <p class="text-sm text-gray-500 mt-2">Format PDF imprimable</p> | |
| </div> | |
| <!-- Disclaimer --> | |
| <div class="bg-gray-100 rounded-lg p-4 text-center text-sm text-gray-600"> | |
| <p><i class="fas fa-exclamation-triangle text-yellow-500 mr-1"></i> Ce programme est une suggestion générale. Consultez un nutritionniste pour un plan personnalisé, surtout en cas de problèmes de santé.</p> | |
| </div> | |
| </div> | |
| <script> | |
| // Animation on load | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const elements = document.querySelectorAll('.fade-in'); | |
| elements.forEach((el, index) => { | |
| setTimeout(() => { | |
| el.style.opacity = '1'; | |
| }, index * 100); | |
| }); | |
| // Download button effect | |
| const downloadBtn = document.getElementById('downloadBtn'); | |
| if(downloadBtn) { | |
| downloadBtn.addEventListener('click', () => { | |
| downloadBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Téléchargement lancé !'; | |
| downloadBtn.classList.remove('bg-blue-600', 'hover:bg-blue-700'); | |
| downloadBtn.classList.add('bg-green-500', 'hover:bg-green-600'); | |
| // Reset after 2 seconds | |
| setTimeout(() => { | |
| downloadBtn.innerHTML = '<i class="fas fa-download mr-2"></i> Télécharger ce Programme'; | |
| downloadBtn.classList.remove('bg-green-500', 'hover:bg-green-600'); | |
| downloadBtn.classList.add('bg-blue-600', 'hover:bg-blue-700'); | |
| }, 2000); | |
| }); | |
| } | |
| }); | |
| </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=fetyfree/deepsite-forever" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |