Spaces:
Running
Running
Update index.html
Browse files- index.html +91 -224
index.html
CHANGED
|
@@ -41,7 +41,7 @@
|
|
| 41 |
}
|
| 42 |
.exercise.active-exercise {
|
| 43 |
display: block;
|
| 44 |
-
animation: fadeIn 0.3s ease-in-out;
|
| 45 |
}
|
| 46 |
.exercise-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; gap: 0.5rem;}
|
| 47 |
.exercise-header input {margin-bottom: 0;}
|
|
@@ -71,21 +71,8 @@
|
|
| 71 |
.satisfaction-value { font-size: 2rem; color: var(--accent); margin-top: 0.5rem; }
|
| 72 |
.exercise-navigation { display: flex; justify-content: space-between; margin-top: 1rem; margin-bottom: 1rem; }
|
| 73 |
|
| 74 |
-
/*
|
| 75 |
-
|
| 76 |
-
from {
|
| 77 |
-
opacity: 0;
|
| 78 |
-
transform: scale(0.9); /* Effet plus marqué */
|
| 79 |
-
}
|
| 80 |
-
to {
|
| 81 |
-
opacity: 1;
|
| 82 |
-
transform: scale(1);
|
| 83 |
-
}
|
| 84 |
-
}
|
| 85 |
-
#new-workout-page.active {
|
| 86 |
-
/* Applique l'animation à toute la page quand elle devient active */
|
| 87 |
-
animation: fadeInZoom 0.3s ease-out;
|
| 88 |
-
}
|
| 89 |
|
| 90 |
/* Styles page de connexion & user info */
|
| 91 |
#login-page .card { max-width: 400px; margin: 2rem auto; }
|
|
@@ -113,8 +100,7 @@
|
|
| 113 |
</style>
|
| 114 |
</head>
|
| 115 |
<body>
|
| 116 |
-
<!--
|
| 117 |
-
<!-- (Il est identique à celui de la réponse précédente, pas besoin de le répéter ici) -->
|
| 118 |
<div class="container">
|
| 119 |
<header>
|
| 120 |
<h1>LiftTrack</h1>
|
|
@@ -208,7 +194,12 @@
|
|
| 208 |
<h2>Statistiques</h2>
|
| 209 |
<div class="stats-grid"> <div class="card stat-card"> <div class="stat-value" id="stats-workout-count">0</div> <div>Séances Totales</div> </div> <div class="card stat-card"> <div class="stat-value" id="stats-avg-tonnage">0</div> <div>Tonnage Moyen</div> </div> <div class="card stat-card"> <div class="stat-value" id="stats-avg-satisfaction">0%</div> <div>Satisfaction Moyenne</div> </div> </div>
|
| 210 |
<h3 style="margin: 1.5rem 0 1rem;">Tendances Récentes</h3>
|
| 211 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 212 |
</div>
|
| 213 |
</div>
|
| 214 |
|
|
@@ -219,244 +210,120 @@
|
|
| 219 |
|
| 220 |
<script>
|
| 221 |
// --- Variables d'État ---
|
| 222 |
-
|
| 223 |
-
let currentUser = null;
|
| 224 |
-
let currentWorkoutId = null;
|
| 225 |
-
let currentExerciseIndex = 0;
|
| 226 |
-
let workoutExercisesForm = []; // Référence aux divs .exercise dans le formulaire
|
| 227 |
|
| 228 |
// --- Éléments DOM ---
|
| 229 |
-
// (Identiques
|
| 230 |
-
const loginPage = document.getElementById('login-page');
|
| 231 |
-
const mainAppContent = document.getElementById('main-app-content');
|
| 232 |
-
const usernameInput = document.getElementById('username');
|
| 233 |
-
const loginBtn = document.getElementById('login-btn');
|
| 234 |
-
const loginError = document.getElementById('login-error');
|
| 235 |
-
const currentUserDisplay = document.getElementById('current-user-display');
|
| 236 |
-
const logoutBtn = document.getElementById('logout-btn');
|
| 237 |
-
const spinner = document.querySelector('#workouts-list .spinner');
|
| 238 |
-
const appContainer = document.getElementById('app-container');
|
| 239 |
-
const navItems = document.querySelectorAll('.nav-item');
|
| 240 |
-
const newWorkoutBtn = document.getElementById('new-workout-btn');
|
| 241 |
-
const saveWorkoutBtn = document.getElementById('save-workout-btn');
|
| 242 |
-
const cancelNewWorkoutBtn = document.getElementById('cancel-new-workout-btn');
|
| 243 |
-
const addExerciseBtn = document.getElementById('add-exercise-btn');
|
| 244 |
-
const exercisesContainer = document.getElementById('exercises-container'); // Conteneur formulaire
|
| 245 |
-
const workoutsList = document.getElementById('workouts-list'); // Conteneur affichage liste
|
| 246 |
-
const backToHomeBtn = document.getElementById('back-to-home');
|
| 247 |
-
const deleteWorkoutBtn = document.getElementById('delete-workout-btn');
|
| 248 |
-
const satisfactionRange = document.getElementById('satisfaction');
|
| 249 |
-
const satisfactionValue = document.querySelector('.satisfaction-value');
|
| 250 |
-
const emptyWorkoutMessage = document.getElementById('empty-workout-message');
|
| 251 |
-
const workoutDateInput = document.getElementById('workout-date');
|
| 252 |
-
const prevExerciseBtn = document.getElementById('prev-exercise-btn');
|
| 253 |
-
const nextExerciseBtn = document.getElementById('next-exercise-btn');
|
| 254 |
-
const currentExerciseIndicator = document.getElementById('current-exercise-indicator');
|
| 255 |
|
| 256 |
|
| 257 |
// --- Initialisation ---
|
| 258 |
-
|
| 259 |
-
|
| 260 |
-
if (rememberedUser) { loginUser(rememberedUser); } else { showLoginPage(); }
|
| 261 |
-
initEventListeners();
|
| 262 |
-
});
|
| 263 |
|
| 264 |
-
// --- Authentification & Persistance
|
|
|
|
| 265 |
function showLoginPage() { loginPage.style.display = 'block'; mainAppContent.style.display = 'none'; loginError.style.display = 'none'; usernameInput.value = ''; currentUser = null; }
|
| 266 |
function showApp() { if (!currentUser) return; loginPage.style.display = 'none'; mainAppContent.style.display = 'block'; currentUserDisplay.textContent = currentUser; setTodayDate(); loadWorkouts(); showPage('home-page'); }
|
| 267 |
function handleLogin() { const username = usernameInput.value.trim(); if (username && username.length > 0) { loginUser(username); } else { loginError.textContent = "Veuillez entrer un nom d'utilisateur."; loginError.style.display = 'block'; }}
|
| 268 |
function loginUser(username) { currentUser = username; sessionStorage.setItem('liftTrackCurrentUser', currentUser); showApp(); }
|
| 269 |
function handleLogout() { currentUser = null; sessionStorage.removeItem('liftTrackCurrentUser'); workouts = []; showLoginPage(); }
|
| 270 |
function getStorageKey() { if (!currentUser) return null; const safeUsername = currentUser.replace(/[^a-zA-Z0-9_-]/g, '_'); return `liftTrackData_${safeUsername}`; }
|
| 271 |
-
function loadWorkouts() {
|
| 272 |
-
|
| 273 |
-
if (spinner) spinner.classList.remove('hidden'); emptyWorkoutMessage.classList.add('hidden'); workoutsList.innerHTML = '';
|
| 274 |
-
setTimeout(() => { try { const savedData = localStorage.getItem(storageKey); workouts = savedData ? JSON.parse(savedData) : []; console.log(`Chargé ${workouts.length} séances pour ${currentUser}`); } catch (e) { console.error("Erreur parsing localStorage:", e); workouts = []; alert("Erreur chargement données."); } finally { if (spinner) spinner.classList.add('hidden'); renderWorkoutsList(); } }, 150);
|
| 275 |
-
}
|
| 276 |
-
function saveWorkouts() {
|
| 277 |
-
const storageKey = getStorageKey(); if (!storageKey) { console.error("Sauvegarde impossible: non connecté."); return; } try { localStorage.setItem(storageKey, JSON.stringify(workouts)); console.log(`Sauvegardé ${workouts.length} séances pour ${currentUser}`); } catch (e) { console.error("Erreur sauvegarde localStorage:", e); alert("Erreur sauvegarde données."); }
|
| 278 |
-
}
|
| 279 |
|
| 280 |
// --- Écouteurs d'Événements ---
|
| 281 |
-
// (Identiques
|
| 282 |
-
function initEventListeners() {
|
| 283 |
-
loginBtn.addEventListener('click', handleLogin);
|
| 284 |
-
logoutBtn.addEventListener('click', handleLogout);
|
| 285 |
-
usernameInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') { e.preventDefault(); handleLogin(); } });
|
| 286 |
-
|
| 287 |
-
navItems.forEach(item => {
|
| 288 |
-
item.addEventListener('click', (e) => { e.preventDefault(); if (!currentUser) return; const targetPageId = item.getAttribute('data-page'); showPage(targetPageId); navItems.forEach(nav => nav.classList.remove('active')); item.classList.add('active'); if (targetPageId === 'stats-page') { updateStats(); } });
|
| 289 |
-
});
|
| 290 |
-
|
| 291 |
-
newWorkoutBtn.addEventListener('click', () => {
|
| 292 |
-
if (!currentUser) return; currentWorkoutId = null; clearNewWorkoutForm(); showPage('new-workout-page');
|
| 293 |
-
});
|
| 294 |
-
|
| 295 |
-
cancelNewWorkoutBtn.addEventListener('click', () => showPage('home-page'));
|
| 296 |
-
saveWorkoutBtn.addEventListener('click', saveWorkout);
|
| 297 |
-
addExerciseBtn.addEventListener('click', handleAddNewExercise);
|
| 298 |
-
prevExerciseBtn.addEventListener('click', navigateExerciseForm.bind(null, -1));
|
| 299 |
-
nextExerciseBtn.addEventListener('click', navigateExerciseForm.bind(null, 1));
|
| 300 |
-
backToHomeBtn.addEventListener('click', () => showPage('home-page'));
|
| 301 |
-
deleteWorkoutBtn.addEventListener('click', deleteWorkout);
|
| 302 |
-
satisfactionRange.addEventListener('input', () => { satisfactionValue.textContent = `${satisfactionRange.value}%`; });
|
| 303 |
-
}
|
| 304 |
-
|
| 305 |
|
| 306 |
// --- Logique Principale ---
|
| 307 |
-
// (Identique à la réponse précédente, y compris showPage, addExercise, saveWorkout etc.)
|
| 308 |
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 = ''; } } }
|
| 309 |
|
|
|
|
| 310 |
function showPage(pageId) {
|
| 311 |
if (!currentUser) { showLoginPage(); return; }
|
| 312 |
-
document.querySelectorAll('#app-container > div').forEach(page => page.classList.remove('active'));
|
| 313 |
-
const pageToShow = document.getElementById(pageId);
|
| 314 |
-
if (pageToShow) { pageToShow.classList.add('active'); } else { console.error(`Page ID "${pageId}" non trouvée. Affichage home-page.`); document.getElementById('home-page').classList.add('active'); pageId = 'home-page'; }
|
| 315 |
-
navItems.forEach(item => { item.classList.remove('active'); });
|
| 316 |
-
const activeNavItem = document.querySelector(`.nav-item[data-page="${pageId === 'stats-page' ? 'stats-page' : 'home-page'}"]`);
|
| 317 |
-
if(activeNavItem) activeNavItem.classList.add('active');
|
| 318 |
-
if (pageId === 'new-workout-page') { renderActiveExerciseForm(); }
|
| 319 |
-
}
|
| 320 |
-
|
| 321 |
-
function handleAddNewExercise() {
|
| 322 |
-
addExercise(true);
|
| 323 |
-
}
|
| 324 |
|
| 325 |
-
|
| 326 |
-
|
| 327 |
-
|
| 328 |
-
const exerciseDiv = document.createElement('div');
|
| 329 |
-
exerciseDiv.className = 'card exercise';
|
| 330 |
-
exerciseDiv.setAttribute('data-exercise-id', exerciseId);
|
| 331 |
-
|
| 332 |
-
exerciseDiv.innerHTML = `
|
| 333 |
-
<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>
|
| 334 |
-
<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>
|
| 335 |
-
<div class="series-container"></div>
|
| 336 |
-
<button class="btn btn-outline add-series" style="width: 100%; margin-top: 0.5rem; padding: 0.4rem;">+ Ajouter Série</button>
|
| 337 |
-
`;
|
| 338 |
-
exercisesContainer.appendChild(exerciseDiv);
|
| 339 |
-
workoutExercisesForm = Array.from(exercisesContainer.querySelectorAll('.exercise'));
|
| 340 |
-
|
| 341 |
-
const removeBtn = exerciseDiv.querySelector('.remove-exercise');
|
| 342 |
-
removeBtn.addEventListener('click', () => {
|
| 343 |
-
const indexToRemove = workoutExercisesForm.indexOf(exerciseDiv);
|
| 344 |
-
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(); }
|
| 345 |
-
});
|
| 346 |
-
|
| 347 |
-
const addSeriesBtn = exerciseDiv.querySelector('.add-series');
|
| 348 |
-
const seriesContainer = exerciseDiv.querySelector('.series-container');
|
| 349 |
-
addSeriesBtn.addEventListener('click', () => addSeries(seriesContainer));
|
| 350 |
-
addSeries(seriesContainer);
|
| 351 |
-
|
| 352 |
-
if (navigateToNew) { currentExerciseIndex = workoutExercisesForm.length - 1; renderActiveExerciseForm(); } else { updateExerciseNavButtons(); }
|
| 353 |
-
}
|
| 354 |
-
|
| 355 |
-
function addSeries(container) {
|
| 356 |
-
if (!currentUser || !container) return; const seriesId = `series-${Date.now()}`; const seriesDiv = document.createElement('div'); seriesDiv.className = 'series'; seriesDiv.setAttribute('data-series-id', seriesId);
|
| 357 |
-
seriesDiv.innerHTML = `<div class="form-row" style="align-items: flex-end; gap: 0.8rem;"> <div class="form-group" style="flex: 1.2;"> <label>Reps</label> <input type="number" class="reps" min="1" placeholder="10" style="padding: 0.4rem;"> </div> <div class="form-group" style="flex: 1.2;"> <label>Charge (kg)</label> <input type="number" class="weight" min="0" step="0.1" placeholder="20" style="padding: 0.4rem;"> </div> <div class="form-group" style="flex: 1; display: flex; align-items: center; padding-bottom: 0.6rem; min-width: 100px;"> <label style="display: inline-flex; align-items: center; color: #bbb; font-size: 0.8rem; margin-bottom: 0; white-space: nowrap;"> <input type="checkbox" class="degressive-checkbox" style="margin-right: 0.3rem;"> Dégressive </label> </div> <button class="btn btn-danger remove-series" style="padding: 0.3rem 0.6rem; margin-bottom: 0.6rem; flex-basis: 30px; flex-grow: 0; align-self: center;">×</button> </div>`;
|
| 358 |
-
container.appendChild(seriesDiv); const removeBtn = seriesDiv.querySelector('.remove-series'); removeBtn.addEventListener('click', () => seriesDiv.remove());
|
| 359 |
-
}
|
| 360 |
|
| 361 |
-
|
| 362 |
-
|
| 363 |
-
|
| 364 |
-
|
| 365 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 366 |
|
| 367 |
-
|
| 368 |
-
|
| 369 |
-
|
| 370 |
-
|
| 371 |
-
updateExerciseNavButtons();
|
| 372 |
}
|
| 373 |
|
| 374 |
-
|
| 375 |
-
|
| 376 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 377 |
}
|
| 378 |
|
| 379 |
-
function clearNewWorkoutForm() {
|
| 380 |
-
if (!currentUser) return; document.getElementById('workout-name').value = ''; document.getElementById('workout-duration').value = '';
|
| 381 |
-
setTodayDate(); exercisesContainer.innerHTML = ''; workoutExercisesForm = [];
|
| 382 |
-
satisfactionRange.value = 75; satisfactionValue.textContent = '75%';
|
| 383 |
-
currentWorkoutId = null; currentExerciseIndex = 0; addExercise(false); renderActiveExerciseForm();
|
| 384 |
-
}
|
| 385 |
-
|
| 386 |
-
function saveWorkout() {
|
| 387 |
-
if (!currentUser) return;
|
| 388 |
-
workoutExercisesForm = Array.from(exercisesContainer.querySelectorAll('.exercise')); // Rafraîchir
|
| 389 |
-
|
| 390 |
-
const workoutName = document.getElementById('workout-name').value.trim();
|
| 391 |
-
const workoutDate = document.getElementById('workout-date').value;
|
| 392 |
-
const workoutDuration = parseInt(document.getElementById('workout-duration').value) || 0;
|
| 393 |
-
const satisfaction = parseInt(document.getElementById('satisfaction').value);
|
| 394 |
-
|
| 395 |
-
if (!workoutName) { alert("Nom séance requis."); return; } if (!workoutDate) { alert("Date requise."); return; } if (workoutDuration <= 0) { alert("Durée invalide."); return; }
|
| 396 |
-
|
| 397 |
-
const exerciseElements = workoutExercisesForm; const exercises = [];
|
| 398 |
-
if (exerciseElements.length === 0) { alert("Ajoutez au moins un exercice."); return; }
|
| 399 |
-
|
| 400 |
-
let validationError = null;
|
| 401 |
-
exerciseElements.forEach((exerciseEl, index) => {
|
| 402 |
-
if (validationError) return;
|
| 403 |
-
const nameInput = exerciseEl.querySelector('.exercise-name'); const exerciseName = nameInput ? nameInput.value.trim() : '';
|
| 404 |
-
const isUnilateral = exerciseEl.querySelector('.unilateral-checkbox').checked;
|
| 405 |
-
if (!exerciseName) { validationError = `Nommez l'exercice #${index + 1}.`; if(nameInput) nameInput.focus(); return; }
|
| 406 |
-
const series = []; const seriesElements = exerciseEl.querySelectorAll('.series');
|
| 407 |
-
if (seriesElements.length === 0) { validationError = `Exercice "${exerciseName}" sans série.`; return; }
|
| 408 |
-
seriesElements.forEach(seriesEl => {
|
| 409 |
-
if (validationError) return;
|
| 410 |
-
const repsInput = seriesEl.querySelector('.reps'); const weightInput = seriesEl.querySelector('.weight');
|
| 411 |
-
const reps = parseInt(repsInput.value) || 0; const weight = parseFloat(weightInput.value) || 0;
|
| 412 |
-
const isDegressive = seriesEl.querySelector('.degressive-checkbox').checked;
|
| 413 |
-
if (reps <= 0) { validationError = `Reps invalides pour "${exerciseName}".`; if(repsInput) repsInput.focus(); return; }
|
| 414 |
-
if (weight < 0) { validationError = `Charge invalide pour "${exerciseName}".`; if(weightInput) weightInput.focus(); return; }
|
| 415 |
-
series.push({ reps, weight, isDegressive });
|
| 416 |
-
});
|
| 417 |
-
if (!validationError) { exercises.push({ name: exerciseName, isUnilateral, series }); }
|
| 418 |
-
});
|
| 419 |
-
|
| 420 |
-
if (validationError) { alert(validationError); return; }
|
| 421 |
|
| 422 |
-
|
| 423 |
-
|
| 424 |
-
const existingIndex = workouts.findIndex(w => w.id === workout.id);
|
| 425 |
-
if (existingIndex > -1) { workouts[existingIndex] = workout; } else { workouts.push(workout); }
|
| 426 |
|
| 427 |
-
|
| 428 |
-
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 429 |
|
| 430 |
-
function renderWorkoutsList() {
|
| 431 |
-
if (!currentUser) return; workoutsList.innerHTML = ''; if (workouts.length === 0) { emptyWorkoutMessage.classList.remove('hidden'); updateStats(); return; } emptyWorkoutMessage.classList.add('hidden');
|
| 432 |
-
const sortedWorkouts = [...workouts].sort((a, b) => new Date(b.date) - new Date(a.date));
|
| 433 |
-
sortedWorkouts.forEach(workout => { const workoutDate = new Date(workout.date).toLocaleDateString('fr-FR', { year: 'numeric', month: 'short', day: 'numeric' }); const workoutDiv = document.createElement('div'); workoutDiv.className = 'card workout-card'; workoutDiv.setAttribute('data-workout-id', workout.id); workoutDiv.innerHTML = `<div class="workout-header"><h3 style="margin-bottom: 0.5rem;">${workout.name}</h3><div class="badge">${workoutDate}</div></div><div class="workout-details" style="font-size: 0.9rem; color: #ccc; margin-top: 0.5rem;"><span>${workout.duration} min</span> | <span>${workout.exercises.length} exo${workout.exercises.length > 1 ? 's' : ''}</span> | <span>${workout.totalTonnage.toFixed(1)} kg</span> | <span>${workout.satisfaction}%</span></div>`; workoutDiv.addEventListener('click', () => displayWorkoutDetails(workout.id)); workoutsList.appendChild(workoutDiv); });
|
| 434 |
-
updateStats();
|
| 435 |
-
}
|
| 436 |
|
| 437 |
-
|
| 438 |
-
|
| 439 |
-
|
| 440 |
-
const detailExercisesContainer = document.getElementById('detail-exercises-container'); detailExercisesContainer.innerHTML = '';
|
| 441 |
-
|
| 442 |
-
workout.exercises.forEach((exercise) => {
|
| 443 |
-
const exerciseDiv = document.createElement('div'); exerciseDiv.className = 'card detail-exercise-card';
|
| 444 |
-
let seriesHtml = '';
|
| 445 |
-
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>`; });
|
| 446 |
-
const unilateralLabel = exercise.isUnilateral ? ' <span class="badge" style="font-size: 0.7rem;">Unilat.</span>' : '';
|
| 447 |
-
exerciseDiv.innerHTML = `<h3 style="font-size: 1.1rem; margin-bottom: 0.5rem;">${exercise.name}${unilateralLabel}</h3> <div class="series-summary-container"> ${seriesHtml} </div>`;
|
| 448 |
-
detailExercisesContainer.appendChild(exerciseDiv);
|
| 449 |
-
});
|
| 450 |
-
currentWorkoutId = workoutId; showPage('workout-details-page');
|
| 451 |
-
}
|
| 452 |
|
| 453 |
-
function deleteWorkout() {
|
| 454 |
-
if (!currentUser || !currentWorkoutId) return; const workoutToDelete = workouts.find(w => w.id === currentWorkoutId); if (!workoutToDelete) return; const confirmDelete = confirm(`Supprimer séance "${workoutToDelete.name}" du ${new Date(workoutToDelete.date).toLocaleDateString('fr-FR')} ?`); if (!confirmDelete) return; workouts = workouts.filter(w => w.id !== currentWorkoutId); saveWorkouts(); currentWorkoutId = null; showPage('home-page'); renderWorkoutsList();
|
| 455 |
-
}
|
| 456 |
|
| 457 |
-
|
| 458 |
-
|
| 459 |
-
}
|
|
|
|
|
|
|
|
|
|
| 460 |
|
| 461 |
</script>
|
| 462 |
</body>
|
|
|
|
| 41 |
}
|
| 42 |
.exercise.active-exercise {
|
| 43 |
display: block;
|
| 44 |
+
animation: fadeIn 0.3s ease-in-out;
|
| 45 |
}
|
| 46 |
.exercise-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; gap: 0.5rem;}
|
| 47 |
.exercise-header input {margin-bottom: 0;}
|
|
|
|
| 71 |
.satisfaction-value { font-size: 2rem; color: var(--accent); margin-top: 0.5rem; }
|
| 72 |
.exercise-navigation { display: flex; justify-content: space-between; margin-top: 1rem; margin-bottom: 1rem; }
|
| 73 |
|
| 74 |
+
/* Pas d'animation zoom par défaut sur la page, on la déclenche via JS */
|
| 75 |
+
/* #new-workout-page.active { animation: fadeInZoom 0.3s ease-out; } enlevé */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 76 |
|
| 77 |
/* Styles page de connexion & user info */
|
| 78 |
#login-page .card { max-width: 400px; margin: 2rem auto; }
|
|
|
|
| 100 |
</style>
|
| 101 |
</head>
|
| 102 |
<body>
|
| 103 |
+
<!-- Structure <body> identique à la réponse précédente -->
|
|
|
|
| 104 |
<div class="container">
|
| 105 |
<header>
|
| 106 |
<h1>LiftTrack</h1>
|
|
|
|
| 194 |
<h2>Statistiques</h2>
|
| 195 |
<div class="stats-grid"> <div class="card stat-card"> <div class="stat-value" id="stats-workout-count">0</div> <div>Séances Totales</div> </div> <div class="card stat-card"> <div class="stat-value" id="stats-avg-tonnage">0</div> <div>Tonnage Moyen</div> </div> <div class="card stat-card"> <div class="stat-value" id="stats-avg-satisfaction">0%</div> <div>Satisfaction Moyenne</div> </div> </div>
|
| 196 |
<h3 style="margin: 1.5rem 0 1rem;">Tendances Récentes</h3>
|
| 197 |
+
<!-- Section Tendances Récentes: Juste un placeholder -->
|
| 198 |
+
<div class="card">
|
| 199 |
+
<p style="text-align: center; margin: 1rem 0; color: #888;">
|
| 200 |
+
(La section des tendances récentes n'est pas encore implémentée.)
|
| 201 |
+
</p>
|
| 202 |
+
</div>
|
| 203 |
</div>
|
| 204 |
</div>
|
| 205 |
|
|
|
|
| 210 |
|
| 211 |
<script>
|
| 212 |
// --- Variables d'État ---
|
| 213 |
+
// (Identiques)
|
| 214 |
+
let workouts = []; let currentUser = null; let currentWorkoutId = null; let currentExerciseIndex = 0; let workoutExercisesForm = [];
|
|
|
|
|
|
|
|
|
|
| 215 |
|
| 216 |
// --- Éléments DOM ---
|
| 217 |
+
// (Identiques)
|
| 218 |
+
const loginPage = document.getElementById('login-page'); const mainAppContent = document.getElementById('main-app-content'); const usernameInput = document.getElementById('username'); const loginBtn = document.getElementById('login-btn'); const loginError = document.getElementById('login-error'); const currentUserDisplay = document.getElementById('current-user-display'); const logoutBtn = document.getElementById('logout-btn'); const spinner = document.querySelector('#workouts-list .spinner'); const appContainer = document.getElementById('app-container'); const navItems = document.querySelectorAll('.nav-item'); const newWorkoutBtn = document.getElementById('new-workout-btn'); const saveWorkoutBtn = document.getElementById('save-workout-btn'); const cancelNewWorkoutBtn = document.getElementById('cancel-new-workout-btn'); const addExerciseBtn = document.getElementById('add-exercise-btn'); const exercisesContainer = document.getElementById('exercises-container'); const workoutsList = document.getElementById('workouts-list'); const backToHomeBtn = document.getElementById('back-to-home'); const deleteWorkoutBtn = document.getElementById('delete-workout-btn'); const satisfactionRange = document.getElementById('satisfaction'); const satisfactionValue = document.querySelector('.satisfaction-value'); const emptyWorkoutMessage = document.getElementById('empty-workout-message'); const workoutDateInput = document.getElementById('workout-date'); const prevExerciseBtn = document.getElementById('prev-exercise-btn'); const nextExerciseBtn = document.getElementById('next-exercise-btn'); const currentExerciseIndicator = document.getElementById('current-exercise-indicator');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 219 |
|
| 220 |
|
| 221 |
// --- Initialisation ---
|
| 222 |
+
// (Identique)
|
| 223 |
+
document.addEventListener('DOMContentLoaded', () => { const rememberedUser = sessionStorage.getItem('liftTrackCurrentUser'); if (rememberedUser) { loginUser(rememberedUser); } else { showLoginPage(); } initEventListeners(); });
|
|
|
|
|
|
|
|
|
|
| 224 |
|
| 225 |
+
// --- Authentification & Persistance ---
|
| 226 |
+
// (Identiques)
|
| 227 |
function showLoginPage() { loginPage.style.display = 'block'; mainAppContent.style.display = 'none'; loginError.style.display = 'none'; usernameInput.value = ''; currentUser = null; }
|
| 228 |
function showApp() { if (!currentUser) return; loginPage.style.display = 'none'; mainAppContent.style.display = 'block'; currentUserDisplay.textContent = currentUser; setTodayDate(); loadWorkouts(); showPage('home-page'); }
|
| 229 |
function handleLogin() { const username = usernameInput.value.trim(); if (username && username.length > 0) { loginUser(username); } else { loginError.textContent = "Veuillez entrer un nom d'utilisateur."; loginError.style.display = 'block'; }}
|
| 230 |
function loginUser(username) { currentUser = username; sessionStorage.setItem('liftTrackCurrentUser', currentUser); showApp(); }
|
| 231 |
function handleLogout() { currentUser = null; sessionStorage.removeItem('liftTrackCurrentUser'); workouts = []; showLoginPage(); }
|
| 232 |
function getStorageKey() { if (!currentUser) return null; const safeUsername = currentUser.replace(/[^a-zA-Z0-9_-]/g, '_'); return `liftTrackData_${safeUsername}`; }
|
| 233 |
+
function loadWorkouts() { const storageKey = getStorageKey(); if (!storageKey) { workouts = []; return; } if (spinner) spinner.classList.remove('hidden'); emptyWorkoutMessage.classList.add('hidden'); workoutsList.innerHTML = ''; setTimeout(() => { try { const savedData = localStorage.getItem(storageKey); workouts = savedData ? JSON.parse(savedData) : []; console.log(`Chargé ${workouts.length} séances pour ${currentUser}`); } catch (e) { console.error("Erreur parsing localStorage:", e); workouts = []; alert("Erreur chargement données."); } finally { if (spinner) spinner.classList.add('hidden'); renderWorkoutsList(); } }, 150); }
|
| 234 |
+
function saveWorkouts() { const storageKey = getStorageKey(); if (!storageKey) { console.error("Sauvegarde impossible: non connecté."); return; } try { localStorage.setItem(storageKey, JSON.stringify(workouts)); console.log(`Sauvegardé ${workouts.length} séances pour ${currentUser}`); } catch (e) { console.error("Erreur sauvegarde localStorage:", e); alert("Erreur sauvegarde données."); } }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 235 |
|
| 236 |
// --- Écouteurs d'Événements ---
|
| 237 |
+
// (Identiques)
|
| 238 |
+
function initEventListeners() { loginBtn.addEventListener('click', handleLogin); logoutBtn.addEventListener('click', handleLogout); usernameInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') { e.preventDefault(); handleLogin(); } }); navItems.forEach(item => { item.addEventListener('click', (e) => { e.preventDefault(); if (!currentUser) return; const targetPageId = item.getAttribute('data-page'); showPage(targetPageId); navItems.forEach(nav => nav.classList.remove('active')); item.classList.add('active'); if (targetPageId === 'stats-page') { updateStats(); } }); }); newWorkoutBtn.addEventListener('click', () => { if (!currentUser) return; currentWorkoutId = null; clearNewWorkoutForm(); showPage('new-workout-page'); }); cancelNewWorkoutBtn.addEventListener('click', () => showPage('home-page')); saveWorkoutBtn.addEventListener('click', saveWorkout); addExerciseBtn.addEventListener('click', handleAddNewExercise); prevExerciseBtn.addEventListener('click', navigateExerciseForm.bind(null, -1)); nextExerciseBtn.addEventListener('click', navigateExerciseForm.bind(null, 1)); backToHomeBtn.addEventListener('click', () => showPage('home-page')); deleteWorkoutBtn.addEventListener('click', deleteWorkout); satisfactionRange.addEventListener('input', () => { satisfactionValue.textContent = `${satisfactionRange.value}%`; }); }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 239 |
|
| 240 |
// --- Logique Principale ---
|
|
|
|
| 241 |
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 = ''; } } }
|
| 242 |
|
| 243 |
+
// **MODIFIÉ pour inclure l'animation flammes**
|
| 244 |
function showPage(pageId) {
|
| 245 |
if (!currentUser) { showLoginPage(); return; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 246 |
|
| 247 |
+
document.querySelectorAll('#app-container > div').forEach(page => {
|
| 248 |
+
page.classList.remove('active');
|
| 249 |
+
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 250 |
|
| 251 |
+
const pageToShow = document.getElementById(pageId);
|
| 252 |
+
if (pageToShow) {
|
| 253 |
+
pageToShow.classList.add('active');
|
| 254 |
+
// **Déclencher l'animation si c'est la page nouvelle séance**
|
| 255 |
+
if (pageId === 'new-workout-page') {
|
| 256 |
+
triggerFlameAnimation(); // Appel de la nouvelle fonction d'animation
|
| 257 |
+
renderActiveExerciseForm(); // S'assurer que l'exercice est affiché
|
| 258 |
+
}
|
| 259 |
+
} else {
|
| 260 |
+
console.error(`Page ID "${pageId}" non trouvée. Affichage home-page.`);
|
| 261 |
+
document.getElementById('home-page').classList.add('active');
|
| 262 |
+
pageId = 'home-page';
|
| 263 |
+
}
|
| 264 |
|
| 265 |
+
// Mettre à jour la nav
|
| 266 |
+
navItems.forEach(item => { item.classList.remove('active'); });
|
| 267 |
+
const activeNavItem = document.querySelector(`.nav-item[data-page="${pageId === 'stats-page' ? 'stats-page' : 'home-page'}"]`);
|
| 268 |
+
if(activeNavItem) activeNavItem.classList.add('active');
|
|
|
|
| 269 |
}
|
| 270 |
|
| 271 |
+
// **NOUVELLE FONCTION pour l'animation flammes**
|
| 272 |
+
function triggerFlameAnimation() {
|
| 273 |
+
// Utiliser canvas-confetti pour simuler des flammes
|
| 274 |
+
const duration = 1 * 1000; // 1 seconde
|
| 275 |
+
const animationEnd = Date.now() + duration;
|
| 276 |
+
const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
|
| 277 |
+
|
| 278 |
+
function randomInRange(min, max) {
|
| 279 |
+
return Math.random() * (max - min) + min;
|
| 280 |
+
}
|
| 281 |
+
|
| 282 |
+
const interval = setInterval(function() {
|
| 283 |
+
const timeLeft = animationEnd - Date.now();
|
| 284 |
+
|
| 285 |
+
if (timeLeft <= 0) {
|
| 286 |
+
return clearInterval(interval);
|
| 287 |
+
}
|
| 288 |
+
|
| 289 |
+
const particleCount = 50 * (timeLeft / duration);
|
| 290 |
+
// Animation depuis le bas, un peu écartée
|
| 291 |
+
confetti(Object.assign({}, defaults, {
|
| 292 |
+
particleCount,
|
| 293 |
+
origin: { x: randomInRange(0.3, 0.7), y: Math.random() - 0.2 }, // Origine en bas, variable
|
| 294 |
+
angle: randomInRange(240, 300), // Direction générale vers le haut
|
| 295 |
+
spread: randomInRange(50, 90), // Cône plus ou moins large
|
| 296 |
+
gravity: 0.5, // Moins de gravité pour monter plus
|
| 297 |
+
drift: randomInRange(-1, 1), // Léger déplacement latéral
|
| 298 |
+
colors: ['#ff6f00', '#ff8f00', '#ffa000', '#ffcc00'] // Couleurs feu
|
| 299 |
+
}));
|
| 300 |
+
}, 250);
|
| 301 |
}
|
| 302 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 303 |
|
| 304 |
+
// --- Logique Formulaire Nouvelle Séance ---
|
| 305 |
+
// (Fonctions handleAddNewExercise, addExercise, addSeries, navigateExerciseForm, renderActiveExerciseForm, updateExerciseNavButtons, clearNewWorkoutForm SONT IDENTIQUES à la réponse précédente - Pas besoin de les répéter ici car elles fonctionnaient)
|
|
|
|
|
|
|
| 306 |
|
| 307 |
+
function handleAddNewExercise() { addExercise(true); }
|
| 308 |
+
function addExercise(navigateToNew = false) { if (!currentUser) return; const exerciseId = `exercise-${Date.now()}`; const exerciseDiv = document.createElement('div'); exerciseDiv.className = 'card exercise'; exerciseDiv.setAttribute('data-exercise-id', exerciseId); 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> </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); workoutExercisesForm = Array.from(exercisesContainer.querySelectorAll('.exercise')); 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')); 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(); } }
|
| 309 |
+
function addSeries(container) { if (!currentUser || !container) return; const seriesId = `series-${Date.now()}`; const seriesDiv = document.createElement('div'); seriesDiv.className = 'series'; seriesDiv.setAttribute('data-series-id', seriesId); seriesDiv.innerHTML = `<div class="form-row" style="align-items: flex-end; gap: 0.8rem;"> <div class="form-group" style="flex: 1.2;"> <label>Reps</label> <input type="number" class="reps" min="1" placeholder="10" style="padding: 0.4rem;"> </div> <div class="form-group" style="flex: 1.2;"> <label>Charge (kg)</label> <input type="number" class="weight" min="0" step="0.1" placeholder="20" style="padding: 0.4rem;"> </div> <div class="form-group" style="flex: 1; display: flex; align-items: center; padding-bottom: 0.6rem; min-width: 100px;"> <label style="display: inline-flex; align-items: center; color: #bbb; font-size: 0.8rem; margin-bottom: 0; white-space: nowrap;"> <input type="checkbox" class="degressive-checkbox" style="margin-right: 0.3rem;"> Dégressive </label> </div> <button class="btn btn-danger remove-series" style="padding: 0.3rem 0.6rem; margin-bottom: 0.6rem; flex-basis: 30px; flex-grow: 0; align-self: center;">×</button> </div>`; container.appendChild(seriesDiv); const removeBtn = seriesDiv.querySelector('.remove-series'); removeBtn.addEventListener('click', () => seriesDiv.remove()); }
|
| 310 |
+
function navigateExerciseForm(direction) { workoutExercisesForm = Array.from(exercisesContainer.querySelectorAll('.exercise')); const newIndex = currentExerciseIndex + direction; if (newIndex >= 0 && newIndex < workoutExercisesForm.length) { currentExerciseIndex = newIndex; renderActiveExerciseForm(); } }
|
| 311 |
+
function renderActiveExerciseForm() { workoutExercisesForm = Array.from(exercisesContainer.querySelectorAll('.exercise')); workoutExercisesForm.forEach(ex => ex.classList.remove('active-exercise')); if (currentExerciseIndex >= 0 && currentExerciseIndex < workoutExercisesForm.length) { workoutExercisesForm[currentExerciseIndex].classList.add('active-exercise'); } updateExerciseNavButtons(); }
|
| 312 |
+
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; } }
|
| 313 |
+
function clearNewWorkoutForm() { 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); renderActiveExerciseForm(); }
|
| 314 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 315 |
|
| 316 |
+
// --- Sauvegarde Workout ---
|
| 317 |
+
// (Identique à la réponse précédente, a priori fonctionnelle)
|
| 318 |
+
function saveWorkout() { if (!currentUser) return; workoutExercisesForm = Array.from(exercisesContainer.querySelectorAll('.exercise')); 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("Nom séance requis."); return; } if (!workoutDate) { alert("Date requise."); return; } if (workoutDuration <= 0) { alert("Durée invalide."); return; } const exerciseElements = workoutExercisesForm; const exercises = []; if (exerciseElements.length === 0) { alert("Ajoutez au moins un exercice."); return; } let validationError = null; exerciseElements.forEach((exerciseEl, index) => { if (validationError) return; const nameInput = exerciseEl.querySelector('.exercise-name'); const exerciseName = nameInput ? nameInput.value.trim() : ''; const isUnilateral = exerciseEl.querySelector('.unilateral-checkbox').checked; 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 "${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) { exercises.push({ name: exerciseName, isUnilateral, series }); } }); if (validationError) { alert(validationError); return; } 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 } }); showPage('home-page'); renderWorkoutsList(); }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 319 |
|
|
|
|
|
|
|
|
|
|
| 320 |
|
| 321 |
+
// --- Affichage et Stats ---
|
| 322 |
+
// (Fonctions renderWorkoutsList, displayWorkoutDetails, deleteWorkout, updateStats IDENTIQUES à la réponse précédente)
|
| 323 |
+
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)); sortedWorkouts.forEach(workout => { const workoutDate = new Date(workout.date).toLocaleDateString('fr-FR', { year: 'numeric', month: 'short', day: 'numeric' }); const workoutDiv = document.createElement('div'); workoutDiv.className = 'card workout-card'; workoutDiv.setAttribute('data-workout-id', workout.id); workoutDiv.innerHTML = `<div class="workout-header"><h3 style="margin-bottom: 0.5rem;">${workout.name}</h3><div class="badge">${workoutDate}</div></div><div class="workout-details" style="font-size: 0.9rem; color: #ccc; margin-top: 0.5rem;"><span>${workout.duration} min</span> | <span>${workout.exercises.length} exo${workout.exercises.length > 1 ? 's' : ''}</span> | <span>${workout.totalTonnage.toFixed(1)} kg</span> | <span>${workout.satisfaction}%</span></div>`; workoutDiv.addEventListener('click', () => displayWorkoutDetails(workout.id)); workoutsList.appendChild(workoutDiv); }); updateStats(); }
|
| 324 |
+
function displayWorkoutDetails(workoutId) { if (!currentUser) return; const workout = workouts.find(w => w.id === workoutId); if (!workout) { console.error("Séance non trouvée:", workoutId); showPage('home-page'); return; } 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 = ''; workout.exercises.forEach((exercise) => { 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>`; }); const unilateralLabel = exercise.isUnilateral ? ' <span class="badge" style="font-size: 0.7rem;">Unilat.</span>' : ''; 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'); }
|
| 325 |
+
function deleteWorkout() { if (!currentUser || !currentWorkoutId) return; const workoutToDelete = workouts.find(w => w.id === currentWorkoutId); if (!workoutToDelete) return; const confirmDelete = confirm(`Supprimer séance "${workoutToDelete.name}" du ${new Date(workoutToDelete.date).toLocaleDateString('fr-FR')} ?`); if (!confirmDelete) return; workouts = workouts.filter(w => w.id !== currentWorkoutId); saveWorkouts(); currentWorkoutId = null; showPage('home-page'); renderWorkoutsList(); }
|
| 326 |
+
function updateStats() { if (!currentUser) return; const workoutCount = workouts.length; document.getElementById('stats-workout-count').textContent = workoutCount; if (workoutCount === 0) { document.getElementById('stats-avg-tonnage').textContent = '0'; document.getElementById('stats-avg-satisfaction').textContent = '0%'; return; } const totalTonnageAll = workouts.reduce((sum, workout) => sum + (workout.totalTonnage || 0), 0); const avgTonnage = totalTonnageAll / workoutCount; document.getElementById('stats-avg-tonnage').textContent = avgTonnage.toFixed(1); const totalSatisfaction = workouts.reduce((sum, workout) => sum + (workout.satisfaction || 0), 0); const avgSatisfaction = totalSatisfaction / workoutCount; document.getElementById('stats-avg-satisfaction').textContent = `${Math.round(avgSatisfaction)}%`; }
|
| 327 |
|
| 328 |
</script>
|
| 329 |
</body>
|