Suivi d'hydratation quotidienne Votre poids (kg): Niveau d'activité: Sédentaire (peu ou pas d'exercice) Légèrement actif (exercice léger 1-3 fois/semaine) Modérément actif (exercice modéré 3-5 fois/semaine) Très actif (exercice intense 6-7 fois/semaine) Extrêmement actif (exercice intense quotidien ou physique) Climat actuel: Tempéré (20-25°C) Chaud (26-32°C) Très chaud (>32°C) Calculer mes besoins en eau Suivi de votre consommation: + 250ml (1 verre) + 500ml (1 bouteille) Réinitialiser let dailyGoal = 0; let currentWater = 0; function calculateHydration() { var poids = parseFloat(document.getElementById('poids').value); var activite = parseFloat(document.getElementById('activite').value); var climat = parseFloat(document.getElementById('climat').value); var resultDiv = document.getElementById('result'); var trackerDiv = document.getElementById('tracker'); if (isNaN(poids)) { resultDiv.innerHTML = "Veuillez entrer des valeurs valides."; return; } // Calcul de base : 0.033L par kg de poids corporel dailyGoal = Math.round((poids * 33) * activite * climat); currentWater = 0; var resultHTML = ` Vos besoins en hydratation: Objectif quotidien: ${dailyGoal} ml d'eau Recommandations: Buvez régulièrement tout au long de la journée Augmentez votre consommation pendant l'exercice Surveillez la couleur de votre urine (elle doit être claire) `; resultDiv.innerHTML = resultHTML; trackerDiv.style.display = 'block'; updateProgress(); } function addWater(amount) { currentWater += amount; updateProgress(); } function resetWater() { currentWater = 0; updateProgress(); } function updateProgress() { const progressBar = document.getElementById('progress-bar'); const percentage = Math.min((currentWater / dailyGoal) * 100, 100); progressBar.style.width = percentage + '%'; progressBar.setAttribute('data-progress', `${currentWater}ml / ${dailyGoal}ml`); } #hydration-calculator { max-width: 600px; /* Augmenté de 500px à 600px */ margin: 30px auto; padding: 25px; border: 2px solid #FF69B4; border-radius: 10px; background-color: #FFF0F5; font-family: Arial, sans-serif; color: black; } #hydration-calculator h2 { color: #FF1493; text-align: center; margin-bottom: 20px; } #hydration-calculator div { margin-bottom: 15px; } #hydration-calculator label { display: block; margin-bottom: 8px; font-weight: bold; } #hydration-calculator input, #hydration-calculator select { width: 100%; padding: 10px; box-sizing: border-box; border: 1px solid #FF69B4; border-radius: 5px; height: auto; /* Ajouté pour permettre le texte de s'afficher sur plusieurs lignes */ white-space: normal; /* Permet le retour à la ligne du texte */ } /* Ajout de styles spécifiques pour les options des select */ #hydration-calculator select option { padding: 10px; white-space: normal; /* Permet le retour à la ligne du texte dans les options */ } #hydration-calculator button { width: 100%; padding: 12px; background-color: #FF1493; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; margin-bottom: 10px; } #hydration-calculator button:hover { background-color: #FF69B4; } .add-water { width: 48% !important; margin-right: 2%; } .reset-water { background-color: #FF69B4 !important; } #result { margin-top: 20px; padding: 15px; background-color: white; border: 1px solid #FF69B4; border-radius: 5px; } #result h3 { color: #FF1493; margin-top: 0; } #result p { margin: 10px 0; } .water-progress { width: 100%; height: 30px; background-color: #f0f0f0; border-radius: 15px; overflow: hidden; margin-bottom: 15px; border: 1px solid #FF69B4; } .progress-bar { width: 0; height: 100%; background-color: #FF1493; transition: width 0.3s ease; position: relative; } .progress-bar::after { content: attr(data-progress); position: absolute; width: 100%; text-align: center; color: white; line-height: 30px; font-weight: bold; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } #tracker { background-color: white; padding: 15px; border-radius: 5px; border: 1px solid #FF69B4; margin-top: 15px; } #hydration-calculator ul { margin: 10px 0; padding-left: 20px; } #hydration-calculator ul li { margin-bottom: 5px; }
