Update index.html

index.html

@@ -4,18 +4,16 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>LiftTrack - Suivi Musculation Multi-Utilisateurs</title>
-    <!-- Ajout de la librairie pour les confettis -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
     <style>
-        /* --- Styles CSS (Superset enlevé) --- */
-        :root {
+        /* --- Styles CSS --- */
+        :root { /* ... variables ... */
             --bg-dark: #121212;
             --bg-card: #1e1e1e;
             --text-light: #e0e0e0;
             --accent: #4CAF50;
             --accent-dark: #3a8a3d;
             --danger: #f44336;
-            /* --superset-border: #4a90e2; enlevé */
         }
         * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
         body { background-color: var(--bg-dark); color: var(--text-light); min-height: 100vh; padding-bottom: 80px; }
@@ -39,11 +37,11 @@
             border-left: 3px solid var(--accent);
             padding-left: 1rem;
             margin-bottom: 1.5rem;
-            display: none; /* Caché par défaut, montré par JS */
+            display: none;
         }
         .exercise.active-exercise {
-            display: block; /* Afficher l'exercice actif */
-             animation: fadeIn 0.3s ease-in-out;
+            display: block;
+             animation: fadeIn 0.3s ease-in-out; /* Utilise fadeIn simple pour l'exercice */
         }
         .exercise-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; gap: 0.5rem;}
         .exercise-header input {margin-bottom: 0;}
@@ -65,7 +63,6 @@
         #app-container > div:not(.active) { display: none !important; }
         .flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;}
         .badge { background-color: var(--accent); color: white; padding: 0.2rem 0.5rem; border-radius: 10px; font-size: 0.8rem; white-space: nowrap; }
-        /* .badge-superset enlevé */
         .spinner { border: 4px solid rgba(0, 0, 0, 0.1); width: 36px; height: 36px; border-radius: 50%; border-left-color: var(--accent); animation: spin 1s linear infinite; margin: 2rem auto; display: none; }
         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
         .exercise-summary { margin: 0.3rem 0; padding: 0.3rem 0; border-bottom: 1px solid #333; font-size: 0.9rem;}
@@ -73,14 +70,20 @@
         .satisfaction { display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 1rem; }
         .satisfaction-value { font-size: 2rem; color: var(--accent); margin-top: 0.5rem; }
         .exercise-navigation { display: flex; justify-content: space-between; margin-top: 1rem; margin-bottom: 1rem; }
-        /* Styles détail superset enlevés */
 
-        /* Animation d'apparition/zoom pour nouvelle séance */
+        /* Animation d'apparition/zoom pour la page nouvelle séance */
          @keyframes fadeInZoom {
-            from { opacity: 0; transform: scale(0.95); }
-            to { opacity: 1; transform: scale(1); }
+            from {
+                opacity: 0;
+                transform: scale(0.9); /* Effet plus marqué */
+            }
+            to {
+                opacity: 1;
+                transform: scale(1);
+            }
         }
          #new-workout-page.active {
+             /* Applique l'animation à toute la page quand elle devient active */
              animation: fadeInZoom 0.3s ease-out;
          }
 
@@ -92,7 +95,7 @@
         .user-info strong { color: var(--text-light); }
         .user-info button { margin-left: 0.5rem; padding: 0.2rem 0.5rem; font-size: 0.8rem; }
 
-         @media (max-width: 600px) {
+         @media (max-width: 600px) { /* ... media queries ... */
              .form-row { flex-direction: column; gap: 0; }
              .container { padding: 0.5rem; }
              h1 { font-size: 1.5rem; }
@@ -102,7 +105,7 @@
              .user-info button { display: block; margin: 0.5rem auto 0;}
              .exercise-navigation button { padding: 0.5rem; font-size: 0.9rem;}
          }
-        /* Animation fade in standard */
+        /* Animation fade in simple */
         @keyframes fadeIn {
             from { opacity: 0; }
             to { opacity: 1; }
@@ -110,7 +113,9 @@
     </style>
 </head>
 <body>
-    <div class="container">
+    <!-- ... tout le contenu de <body> ... -->
+    <!-- (Il est identique à celui de la réponse précédente, pas besoin de le répéter ici) -->
+     <div class="container">
         <header>
             <h1>LiftTrack</h1>
             <p>Suivi de vos séances de musculation</p>
@@ -221,6 +226,7 @@
         let workoutExercisesForm = []; // Référence aux divs .exercise dans le formulaire
 
         // --- Éléments DOM ---
+        // (Identiques à la réponse précédente)
         const loginPage = document.getElementById('login-page');
         const mainAppContent = document.getElementById('main-app-content');
         const usernameInput = document.getElementById('username');
@@ -247,6 +253,7 @@
         const nextExerciseBtn = document.getElementById('next-exercise-btn');
         const currentExerciseIndicator = document.getElementById('current-exercise-indicator');
 
+
         // --- Initialisation ---
         document.addEventListener('DOMContentLoaded', () => {
             const rememberedUser = sessionStorage.getItem('liftTrackCurrentUser');
@@ -271,6 +278,7 @@
         }
 
         // --- Écouteurs d'Événements ---
+        // (Identiques à la réponse précédente)
         function initEventListeners() {
             loginBtn.addEventListener('click', handleLogin);
             logoutBtn.addEventListener('click', handleLogout);
@@ -294,7 +302,9 @@
             satisfactionRange.addEventListener('input', () => { satisfactionValue.textContent = `${satisfactionRange.value}%`; });
         }
 
+
         // --- Logique Principale ---
+        // (Identique à la réponse précédente, y compris showPage, addExercise, saveWorkout etc.)
         function setTodayDate() { if(workoutDateInput) { try { const today = new Date().toISOString().split('T')[0]; workoutDateInput.value = today; } catch (e) { console.error("Impossible définir date:", e); workoutDateInput.value = ''; } } }
 
          function showPage(pageId) {
@@ -308,10 +318,8 @@
             if (pageId === 'new-workout-page') { renderActiveExerciseForm(); }
         }
 
-        // --- Logique Formulaire Nouvelle Séance ---
-
         function handleAddNewExercise() {
-             addExercise(true); // true pour naviguer vers le nouvel exercice
+             addExercise(true);
         }
 
         function addExercise(navigateToNew = false) {
@@ -321,51 +329,27 @@
             exerciseDiv.className = 'card exercise';
             exerciseDiv.setAttribute('data-exercise-id', exerciseId);
 
-            // **HTML SANS SUPERSET**
             exerciseDiv.innerHTML = `
-                <div class="exercise-header">
-                    <input type="text" placeholder="Nom Exercice" class="exercise-name">
-                    <button class="btn btn-danger remove-exercise" style="padding: 0.3rem 0.6rem; flex-shrink: 0;">×</button>
-                </div>
-                <div class="form-group" style="margin-top: 0.5rem; margin-bottom: 0.5rem;">
-                     <label style="display: inline-flex; align-items: center; color: #bbb; font-size: 0.9rem;">
-                        <input type="checkbox" class="unilateral-checkbox"> Unilatéral
-                    </label>
-                    <!-- Checkbox Superset enlevée -->
-                </div>
+                <div class="exercise-header"> <input type="text" placeholder="Nom Exercice" class="exercise-name"> <button class="btn btn-danger remove-exercise" style="padding: 0.3rem 0.6rem; flex-shrink: 0;">×</button> </div>
+                <div class="form-group" style="margin-top: 0.5rem; margin-bottom: 0.5rem;"> <label style="display: inline-flex; align-items: center; color: #bbb; font-size: 0.9rem;"> <input type="checkbox" class="unilateral-checkbox"> Unilatéral </label> </div>
                 <div class="series-container"></div>
                 <button class="btn btn-outline add-series" style="width: 100%; margin-top: 0.5rem; padding: 0.4rem;">+ Ajouter Série</button>
             `;
             exercisesContainer.appendChild(exerciseDiv);
-
-            // Mettre à jour la référence immédiatement
             workoutExercisesForm = Array.from(exercisesContainer.querySelectorAll('.exercise'));
 
-            // Écouteurs pour cet exercice
             const removeBtn = exerciseDiv.querySelector('.remove-exercise');
              removeBtn.addEventListener('click', () => {
                  const indexToRemove = workoutExercisesForm.indexOf(exerciseDiv);
-                 if (indexToRemove > -1) {
-                     exerciseDiv.remove();
-                     workoutExercisesForm = Array.from(exercisesContainer.querySelectorAll('.exercise')); // MAJ après suppression DOM
-                     if (currentExerciseIndex >= indexToRemove) { currentExerciseIndex = Math.max(0, currentExerciseIndex - 1); }
-                     if (currentExerciseIndex >= workoutExercisesForm.length) { currentExerciseIndex = Math.max(0, workoutExercisesForm.length - 1); }
-                     renderActiveExerciseForm();
-                 }
+                 if (indexToRemove > -1) { exerciseDiv.remove(); workoutExercisesForm = Array.from(exercisesContainer.querySelectorAll('.exercise')); if (currentExerciseIndex >= indexToRemove) { currentExerciseIndex = Math.max(0, currentExerciseIndex - 1); } if (currentExerciseIndex >= workoutExercisesForm.length) { currentExerciseIndex = Math.max(0, workoutExercisesForm.length - 1); } renderActiveExerciseForm(); }
              });
 
             const addSeriesBtn = exerciseDiv.querySelector('.add-series');
             const seriesContainer = exerciseDiv.querySelector('.series-container');
             addSeriesBtn.addEventListener('click', () => addSeries(seriesContainer));
-
             addSeries(seriesContainer);
 
-             if (navigateToNew) {
-                 currentExerciseIndex = workoutExercisesForm.length - 1;
-                 renderActiveExerciseForm();
-             } else {
-                 updateExerciseNavButtons();
-             }
+             if (navigateToNew) { currentExerciseIndex = workoutExercisesForm.length - 1; renderActiveExerciseForm(); } else { updateExerciseNavButtons(); }
         }
 
         function addSeries(container) {
@@ -375,135 +359,74 @@
         }
 
         function navigateExerciseForm(direction) {
-            // S'assurer que la référence est à jour avant de naviguer
             workoutExercisesForm = Array.from(exercisesContainer.querySelectorAll('.exercise'));
             const newIndex = currentExerciseIndex + direction;
-            if (newIndex >= 0 && newIndex < workoutExercisesForm.length) {
-                currentExerciseIndex = newIndex;
-                renderActiveExerciseForm();
-            }
+            if (newIndex >= 0 && newIndex < workoutExercisesForm.length) { currentExerciseIndex = newIndex; renderActiveExerciseForm(); }
         }
 
         function renderActiveExerciseForm() {
             workoutExercisesForm = Array.from(exercisesContainer.querySelectorAll('.exercise'));
             workoutExercisesForm.forEach(ex => ex.classList.remove('active-exercise'));
-
-            if (currentExerciseIndex >= 0 && currentExerciseIndex < workoutExercisesForm.length) {
-                 const currentExDiv = workoutExercisesForm[currentExerciseIndex];
-                 currentExDiv.classList.add('active-exercise');
-                 // Logique style superset enlevée ici
-            }
+            if (currentExerciseIndex >= 0 && currentExerciseIndex < workoutExercisesForm.length) { workoutExercisesForm[currentExerciseIndex].classList.add('active-exercise'); }
             updateExerciseNavButtons();
         }
 
          function updateExerciseNavButtons() {
              const totalExercises = workoutExercisesForm.length;
-             if (totalExercises === 0) {
-                 currentExerciseIndicator.textContent = "(Aucun exercice)";
-                 prevExerciseBtn.disabled = true;
-                 nextExerciseBtn.disabled = true;
-             } else {
-                 currentExerciseIndicator.textContent = `(${currentExerciseIndex + 1}/${totalExercises})`;
-                 prevExerciseBtn.disabled = currentExerciseIndex === 0;
-                 nextExerciseBtn.disabled = currentExerciseIndex === totalExercises - 1;
-             }
+             if (totalExercises === 0) { currentExerciseIndicator.textContent = "(Aucun exercice)"; prevExerciseBtn.disabled = true; nextExerciseBtn.disabled = true; } else { currentExerciseIndicator.textContent = `(${currentExerciseIndex + 1}/${totalExercises})`; prevExerciseBtn.disabled = currentExerciseIndex === 0; nextExerciseBtn.disabled = currentExerciseIndex === totalExercises - 1; }
          }
 
         function clearNewWorkoutForm() {
-            if (!currentUser) return;
-            document.getElementById('workout-name').value = ''; document.getElementById('workout-duration').value = '';
+            if (!currentUser) return; document.getElementById('workout-name').value = ''; document.getElementById('workout-duration').value = '';
             setTodayDate(); exercisesContainer.innerHTML = ''; workoutExercisesForm = [];
             satisfactionRange.value = 75; satisfactionValue.textContent = '75%';
-            currentWorkoutId = null; currentExerciseIndex = 0;
-            addExercise(false); // Ajoute le premier vide
-            renderActiveExerciseForm(); // Assure l'affichage correct
+            currentWorkoutId = null; currentExerciseIndex = 0; addExercise(false); renderActiveExerciseForm();
         }
 
         function saveWorkout() {
             if (!currentUser) return;
-
-            // **CORRECTION : Rafraîchir la référence juste avant la validation**
-            workoutExercisesForm = Array.from(exercisesContainer.querySelectorAll('.exercise'));
+            workoutExercisesForm = Array.from(exercisesContainer.querySelectorAll('.exercise')); // Rafraîchir
 
             const workoutName = document.getElementById('workout-name').value.trim();
             const workoutDate = document.getElementById('workout-date').value;
             const workoutDuration = parseInt(document.getElementById('workout-duration').value) || 0;
             const satisfaction = parseInt(document.getElementById('satisfaction').value);
 
-            if (!workoutName) { alert("Veuillez entrer un nom pour la séance."); return; }
-            if (!workoutDate) { alert("Veuillez choisir une date pour la séance."); return; }
-            if (workoutDuration <= 0) { alert("Veuillez entrer une durée valide (en minutes)."); return; }
+            if (!workoutName) { alert("Nom séance requis."); return; } if (!workoutDate) { alert("Date requise."); return; } if (workoutDuration <= 0) { alert("Durée invalide."); return; }
 
-            // Utiliser la référence fraîchement mise à jour
-            const exerciseElements = workoutExercisesForm;
-            const exercises = [];
-            if (exerciseElements.length === 0) { alert("Veuillez ajouter au moins un exercice à la séance."); return; }
+            const exerciseElements = workoutExercisesForm; const exercises = [];
+            if (exerciseElements.length === 0) { alert("Ajoutez au moins un exercice."); return; }
 
             let validationError = null;
-             exerciseElements.forEach((exerciseEl, index) => { // Ajout index pour debug éventuel
+             exerciseElements.forEach((exerciseEl, index) => {
                 if (validationError) return;
-
-                const nameInput = exerciseEl.querySelector('.exercise-name');
-                const exerciseName = nameInput ? nameInput.value.trim() : ''; // Vérifier si l'input existe
+                const nameInput = exerciseEl.querySelector('.exercise-name'); const exerciseName = nameInput ? nameInput.value.trim() : '';
                 const isUnilateral = exerciseEl.querySelector('.unilateral-checkbox').checked;
-                // isSupersetStart enlevé
-
-                // **Point crucial de la validation du nom**
-                if (!exerciseName) {
-                    // Donner un indice (numéro de l'exercice basé sur l'ordre actuel)
-                    validationError = `Veuillez nommer l'exercice #${index + 1}.`;
-                    // Essayer de mettre le focus sur le champ vide si possible
-                    if(nameInput) nameInput.focus();
-                    return;
-                }
-
-                const series = [];
-                const seriesElements = exerciseEl.querySelectorAll('.series');
-                if (seriesElements.length === 0) { validationError = `L'exercice "${exerciseName}" doit contenir au moins une série.`; return; }
-
+                if (!exerciseName) { validationError = `Nommez l'exercice #${index + 1}.`; if(nameInput) nameInput.focus(); return; }
+                const series = []; const seriesElements = exerciseEl.querySelectorAll('.series');
+                if (seriesElements.length === 0) { validationError = `Exercice "${exerciseName}" sans série.`; return; }
                 seriesElements.forEach(seriesEl => {
                      if (validationError) return;
                     const repsInput = seriesEl.querySelector('.reps'); const weightInput = seriesEl.querySelector('.weight');
                     const reps = parseInt(repsInput.value) || 0; const weight = parseFloat(weightInput.value) || 0;
                     const isDegressive = seriesEl.querySelector('.degressive-checkbox').checked;
-                    if (reps <= 0) { validationError = `Reps invalides pour une série de "${exerciseName}".`; if(repsInput) repsInput.focus(); return; }
-                    if (weight < 0) { validationError = `Charge invalide pour une série de "${exerciseName}".`; if(weightInput) weightInput.focus(); return; }
+                    if (reps <= 0) { validationError = `Reps invalides pour "${exerciseName}".`; if(repsInput) repsInput.focus(); return; }
+                    if (weight < 0) { validationError = `Charge invalide pour "${exerciseName}".`; if(weightInput) weightInput.focus(); return; }
                     series.push({ reps, weight, isDegressive });
                 });
-
-                if (!validationError) {
-                     // **Objet exercice SANS isSupersetStart**
-                    exercises.push({ name: exerciseName, isUnilateral, series });
-                }
+                if (!validationError) { exercises.push({ name: exerciseName, isUnilateral, series }); }
             });
 
             if (validationError) { alert(validationError); return; }
 
-            // --- Calcul Tonnage ---
-            let totalTonnage = 0;
-            exercises.forEach(exercise => {
-                exercise.series.forEach(serie => {
-                    const weightFactor = exercise.isUnilateral ? 2 : 1;
-                    totalTonnage += serie.reps * serie.weight * weightFactor;
-                });
-            });
-
-            // --- Création/MAJ Objet Workout ---
-            const workout = {
-                id: currentWorkoutId || `workout-${Date.now()}`, name: workoutName, date: workoutDate, duration: workoutDuration,
-                exercises: exercises, // Utilise le tableau local `exercises`
-                totalTonnage: totalTonnage, satisfaction: satisfaction
-            };
+            let totalTonnage = 0; exercises.forEach(ex => ex.series.forEach(s => totalTonnage += s.reps * s.weight * (ex.isUnilateral ? 2 : 1)));
+            const workout = { id: currentWorkoutId || `workout-${Date.now()}`, name: workoutName, date: workoutDate, duration: workoutDuration, exercises: exercises, totalTonnage: totalTonnage, satisfaction: satisfaction };
             const existingIndex = workouts.findIndex(w => w.id === workout.id);
             if (existingIndex > -1) { workouts[existingIndex] = workout; } else { workouts.push(workout); }
 
-            saveWorkouts();
-            confetti({ particleCount: 150, spread: 90, origin: { y: 0.6 } }); // Confettis!
-            showPage('home-page');
-            renderWorkoutsList();
+            saveWorkouts(); confetti({ particleCount: 150, spread: 90, origin: { y: 0.6 } }); showPage('home-page'); renderWorkoutsList();
         }
 
-        // --- Affichage et Stats ---
         function renderWorkoutsList() {
             if (!currentUser) return; workoutsList.innerHTML = ''; if (workouts.length === 0) { emptyWorkoutMessage.classList.remove('hidden'); updateStats(); return; } emptyWorkoutMessage.classList.add('hidden');
             const sortedWorkouts = [...workouts].sort((a, b) => new Date(b.date) - new Date(a.date));
@@ -516,28 +439,15 @@
             document.getElementById('detail-workout-name').textContent = workout.name; document.getElementById('detail-date').textContent = new Date(workout.date).toLocaleDateString('fr-FR'); document.getElementById('detail-duration').textContent = workout.duration; document.getElementById('detail-tonnage').textContent = workout.totalTonnage.toFixed(1); document.getElementById('detail-satisfaction').textContent = `${workout.satisfaction}%`; document.getElementById('detail-exercises-count').textContent = workout.exercises.length;
             const detailExercisesContainer = document.getElementById('detail-exercises-container'); detailExercisesContainer.innerHTML = '';
 
-            // **Affichage détail SANS logique Superset**
             workout.exercises.forEach((exercise) => {
-                const exerciseDiv = document.createElement('div');
-                exerciseDiv.className = 'card detail-exercise-card'; // Juste la classe de base
-
+                const exerciseDiv = document.createElement('div'); exerciseDiv.className = 'card detail-exercise-card';
                 let seriesHtml = '';
-                exercise.series.forEach((serie, sIndex) => {
-                     const degressiveLabel = serie.isDegressive ? ' <span class="badge" style="font-size: 0.7rem; background-color: var(--accent-dark);">Dégr.</span>' : ''; const weightFactor = exercise.isUnilateral ? 2 : 1; const seriesTonnage = serie.reps * serie.weight * weightFactor;
-                     seriesHtml += `<div class="exercise-summary"><div class="flex-between"><span>Série ${sIndex + 1}: ${serie.reps} reps × ${serie.weight} kg${degressiveLabel}</span><span style="color: #aaa;">(${seriesTonnage.toFixed(1)} kg)</span></div></div>`;
-                 });
-
+                exercise.series.forEach((serie, sIndex) => { const degressiveLabel = serie.isDegressive ? ' <span class="badge" style="font-size: 0.7rem; background-color: var(--accent-dark);">Dégr.</span>' : ''; const weightFactor = exercise.isUnilateral ? 2 : 1; const seriesTonnage = serie.reps * serie.weight * weightFactor; seriesHtml += `<div class="exercise-summary"><div class="flex-between"><span>Série ${sIndex + 1}: ${serie.reps} reps × ${serie.weight} kg${degressiveLabel}</span><span style="color: #aaa;">(${seriesTonnage.toFixed(1)} kg)</span></div></div>`; });
                 const unilateralLabel = exercise.isUnilateral ? ' <span class="badge" style="font-size: 0.7rem;">Unilat.</span>' : '';
-                 // Pas de supersetLabel ici
-
-                exerciseDiv.innerHTML = `
-                    <h3 style="font-size: 1.1rem; margin-bottom: 0.5rem;">${exercise.name}${unilateralLabel}</h3>
-                    <div class="series-summary-container"> ${seriesHtml} </div>`;
+                exerciseDiv.innerHTML = `<h3 style="font-size: 1.1rem; margin-bottom: 0.5rem;">${exercise.name}${unilateralLabel}</h3> <div class="series-summary-container"> ${seriesHtml} </div>`;
                 detailExercisesContainer.appendChild(exerciseDiv);
             });
-
-            currentWorkoutId = workoutId;
-            showPage('workout-details-page');
+            currentWorkoutId = workoutId; showPage('workout-details-page');
         }
 
         function deleteWorkout() {