Hugging Face's logo

Spaces:
BitDown
/
CocktailFitness
Running

App Files Community
BitDown commited on
Commit
7d46140
·
verified ·
1 Parent(s): ca5c1aa

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +708 -1
index.html CHANGED
@@ -1,4 +1,711 @@
1
- <!doctype html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2
  <html>
3
  <head>
4
  <meta charset="utf-8" />
 
1
+ <!doctype html><!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <!-- Titre mis à jour -->
7
+ <title>Cocktail Fitness - Suivi</title>
8
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
9
+
10
+ <!-- SDK Firebase (v8) - Inchangé -->
11
+ <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
12
+ <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
13
+ <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>
14
+
15
+ <!-- Importation de Google Fonts (Oswald) -->
16
+ <link rel="preconnect" href="https://fonts.googleapis.com">
17
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
18
+ <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
19
+
20
+
21
+ <style>
22
+ /* ===== NOUVELLES VARIABLES DE COULEUR & POLICES ===== */
23
+ :root {
24
+ --bg-dark: #101010; /* Fond très sombre, proche du noir */
25
+ --bg-card: #1e1e1e; /* Fond des cartes légèrement plus clair */
26
+ --text-light: #f0f0f0; /* Texte principal légèrement off-white */
27
+ --text-secondary: #aaaaaa; /* Texte secondaire (labels, etc.) */
28
+ --accent: #FFC107; /* Jaune/Or du logo Cocktail */
29
+ --accent-dark: #E0A800; /* Jaune plus sombre pour hover */
30
+ --text-on-accent: #101010; /* Texte sur fond jaune (assez foncé pour contraste) */
31
+ --neutral-white: #FFFFFF; /* Blanc pur du logo Fitness */
32
+ --danger: #f44336; /* Rouge pour danger (inchangé) */
33
+ --info: #6c757d; /* Couleur neutre/grise pour info (ancien bleu) */
34
+ --border-color: #333333; /* Couleur des bordures */
35
+
36
+ --font-primary: 'Roboto', sans-serif; /* Police par défaut */
37
+ --font-headings: 'Oswald', sans-serif; /* Police pour titres/boutons (style COCKTAIL) */
38
+ }
39
+ /* ===== FIN NOUVELLES VARIABLES ===== */
40
+
41
+ * {
42
+ margin: 0;
43
+ padding: 0;
44
+ box-sizing: border-box;
45
+ /* Police par défaut appliquée */
46
+ font-family: var(--font-primary);
47
+ }
48
+
49
+ body {
50
+ background-color: var(--bg-dark);
51
+ color: var(--text-light);
52
+ min-height: 100vh;
53
+ padding-bottom: 80px; /* Espace pour nav bottom */
54
+ }
55
+
56
+ .container {
57
+ width: 100%;
58
+ max-width: 800px;
59
+ margin: 0 auto;
60
+ padding: 1rem;
61
+ }
62
+
63
+ /* Header modifié pour intégrer le logo */
64
+ header {
65
+ padding: 1rem 0;
66
+ text-align: center;
67
+ border-bottom: 1px solid var(--border-color);
68
+ margin-bottom: 1rem;
69
+ display: flex; /* Utilisation de flex pour centrer le logo */
70
+ flex-direction: column; /* Logo au-dessus du slogan */
71
+ align-items: center; /* Centrage horizontal */
72
+ }
73
+
74
+ header img#app-logo {
75
+ max-width: 250px; /* Ajustez la taille selon vos besoins */
76
+ height: auto;
77
+ margin-bottom: 0.5rem; /* Espace entre logo et slogan */
78
+ }
79
+
80
+ header p {
81
+ color: var(--text-secondary);
82
+ font-size: 0.9rem;
83
+ }
84
+ /* Fin modif header */
85
+
86
+ h1, h2, h3, h4 {
87
+ /* Application de la police titre + couleur accent */
88
+ font-family: var(--font-headings);
89
+ font-weight: 700; /* Assurez-vous que le poids est chargé */
90
+ color: var(--accent);
91
+ text-transform: uppercase; /* Style COCKTAIL */
92
+ letter-spacing: 0.5px; /* Léger espacement */
93
+ }
94
+
95
+ .btn {
96
+ background-color: var(--accent);
97
+ /* Texte sur bouton doit contraster avec le jaune */
98
+ color: var(--text-on-accent);
99
+ border: none;
100
+ padding: 0.6rem 1.2rem;
101
+ border-radius: 4px;
102
+ cursor: pointer;
103
+ font-weight: bold; /* Utilise le poids de Roboto Bold par défaut */
104
+ font-family: var(--font-headings); /* Police titre sur boutons */
105
+ text-transform: uppercase; /* Style COCKTAIL */
106
+ transition: background-color 0.2s, color 0.2s;
107
+ }
108
+
109
+ .btn:hover {
110
+ background-color: var(--accent-dark);
111
+ color: var(--text-on-accent);
112
+ }
113
+
114
+ .btn:disabled {
115
+ background-color: #555;
116
+ color: #999;
117
+ cursor: not-allowed;
118
+ }
119
+
120
+ .btn-outline {
121
+ background-color: transparent;
122
+ color: var(--accent);
123
+ border: 1px solid var(--accent);
124
+ }
125
+ .btn-outline:hover {
126
+ background-color: rgba(255, 193, 7, 0.1); /* Léger fond jaune au survol */
127
+ color: var(--accent);
128
+ }
129
+
130
+ .btn-outline:disabled {
131
+ color: #555;
132
+ border-color: #555;
133
+ background-color: transparent;
134
+ }
135
+
136
+ .btn-danger {
137
+ background-color: var(--danger);
138
+ color: white; /* Texte blanc sur rouge */
139
+ border-color: var(--danger);
140
+ }
141
+ .btn-danger:hover {
142
+ background-color: #d32f2f; /* Rouge plus foncé */
143
+ color: white;
144
+ }
145
+
146
+ .btn-info {
147
+ background-color: var(--info);
148
+ color: var(--text-light); /* Texte clair sur fond gris */
149
+ border-color: var(--info);
150
+ }
151
+ .btn-info:hover {
152
+ background-color: #5a6268; /* Gris plus foncé */
153
+ color: var(--text-light);
154
+ }
155
+
156
+ input, select, textarea {
157
+ width: 100%;
158
+ padding: 0.7rem; /* Légèrement plus de padding */
159
+ margin-bottom: 1rem;
160
+ background-color: #2a2a2a;
161
+ border: 1px solid #444;
162
+ border-radius: 4px;
163
+ color: var(--text-light);
164
+ font-size: 1rem; /* Taille de police standard */
165
+ }
166
+ input:focus, select:focus, textarea:focus {
167
+ outline: none;
168
+ border-color: var(--accent);
169
+ box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.3); /* Ombre focus jaune */
170
+ }
171
+
172
+ input[type="checkbox"] {
173
+ width: auto;
174
+ margin-right: 0.5rem;
175
+ vertical-align: middle;
176
+ accent-color: var(--accent); /* Couleur de la coche */
177
+ }
178
+
179
+ .card {
180
+ background-color: var(--bg-card);
181
+ border-radius: 8px;
182
+ padding: 1.2rem; /* Padding un peu plus grand */
183
+ margin-bottom: 1rem;
184
+ box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* Ombre un peu plus prononcée */
185
+ }
186
+
187
+ .form-group { margin-bottom: 1rem; }
188
+ .form-row { display: flex; gap: 1rem; margin-bottom: 0.5rem; flex-wrap: wrap; } /* Espace augmenté */
189
+ .form-row > * { flex: 1; margin-bottom: 0; min-width: 100px; }
190
+
191
+ label {
192
+ display: block;
193
+ margin-bottom: 0.4rem; /* Espace label/input */
194
+ color: var(--text-secondary);
195
+ font-size: 0.9rem;
196
+ font-weight: bold; /* Labels en gras */
197
+ }
198
+
199
+ /* Exercise styling */
200
+ .exercise {
201
+ border-left: 4px solid var(--accent); /* Bordure accentuée */
202
+ padding-left: 1rem;
203
+ margin-bottom: 1.5rem;
204
+ display: none;
205
+ background-color: rgba(0,0,0,0.1); /* Léger fond pour démarquer */
206
+ padding: 1rem; /* Padding interne */
207
+ border-radius: 0 4px 4px 0;
208
+ }
209
+ .exercise.active-exercise { display: block; animation: fadeIn 0.3s ease-in-out; }
210
+ .exercise-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 0.5rem;}
211
+ .exercise-header input { margin-bottom: 0; }
212
+ .series-container { margin-left: 0rem; margin-top: 1rem; } /* Pas de marge gauche superflue */
213
+ .series { background-color: #282828; padding: 0.8rem; border-radius: 4px; margin-bottom: 0.8rem; border: 1px solid #333; } /* Style série amélioré */
214
+
215
+ /* Nav Bottom */
216
+ .nav-bottom {
217
+ position: fixed; bottom: 0; left: 0; width: 100%;
218
+ background-color: #1a1a1a;
219
+ display: flex; justify-content: space-around;
220
+ padding: 0.7rem 0;
221
+ box-shadow: 0 -3px 10px rgba(0,0,0,0.4);
222
+ z-index: 10;
223
+ }
224
+ .nav-item {
225
+ text-align: center; color: var(--text-secondary);
226
+ text-decoration: none; font-size: 0.85rem;
227
+ transition: color 0.2s; padding: 0 0.5rem;
228
+ }
229
+ .nav-item.active { color: var(--accent); font-weight: bold; }
230
+ .nav-icon { font-size: 1.5rem; margin-bottom: 0.2rem; } /* Icônes plus grandes */
231
+
232
+ /* Workout Card */
233
+ .workout-card {
234
+ border-left: 4px solid var(--accent);
235
+ cursor: pointer;
236
+ transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
237
+ position: relative; /* Pour positionner le badge date */
238
+ }
239
+ .workout-card:hover {
240
+ transform: translateY(-3px); /* Légère lévitation */
241
+ box-shadow: 0 6px 12px rgba(0,0,0,0.4);
242
+ }
243
+ .workout-header { display: flex; justify-content: space-between; align-items: flex-start; }
244
+ .workout-header h3 { color: var(--text-light); margin-bottom: 0.3rem; font-family: var(--font-primary); text-transform: none; letter-spacing: normal; font-weight: bold; } /* Nom séance normal */
245
+ .workout-header .badge { position: absolute; top: 1rem; right: 1rem; background-color: var(--info); color: var(--text-light); } /* Badge date repositionné */
246
+ .workout-details { font-size: 0.9rem; color: var(--text-secondary); margin-top: 0.8rem; }
247
+ .workout-details span { margin-right: 0.8rem; }
248
+
249
+ /* Stats */
250
+ .stat-card { text-align: center; padding: 1rem; }
251
+ .stat-value {
252
+ font-size: 2rem; /* Taille augmentée */
253
+ color: var(--accent);
254
+ font-weight: bold;
255
+ font-family: var(--font-headings); /* Police titre */
256
+ margin-bottom: 0.3rem;
257
+ }
258
+ .stat-card div:last-child { color: var(--text-secondary); font-size: 0.9rem; } /* Label stat */
259
+ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; } /* Min width augmentée */
260
+
261
+ .hidden { display: none !important; } /* Utilise !important pour forcer */
262
+ #login-page { display: block; }
263
+ #main-app-content { display: none; }
264
+ #app-container > div:not(.active) { display: none !important; }
265
+ .flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } /* Espace augmenté */
266
+
267
+ /* Badges */
268
+ .badge {
269
+ background-color: var(--accent);
270
+ color: var(--text-on-accent);
271
+ padding: 0.3rem 0.6rem; /* Padding ajusté */
272
+ border-radius: 12px; /* Plus arrondi */
273
+ font-size: 0.8rem;
274
+ font-weight: bold;
275
+ white-space: nowrap;
276
+ margin-left: 5px;
277
+ }
278
+ .badge.type-badge { background-color: var(--neutral-white); color: var(--bg-dark); } /* Badge type en blanc (logo Fitness) */
279
+
280
+ /* Spinner */
281
+ .spinner {
282
+ border: 4px solid rgba(255, 255, 255, 0.1);
283
+ width: 36px; height: 36px;
284
+ border-radius: 50%;
285
+ border-left-color: var(--accent); /* Couleur accent pour spinner */
286
+ animation: spin 1s linear infinite;
287
+ margin: 2rem auto; display: none;
288
+ }
289
+ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
290
+
291
+ /* Exercise Summary in Details */
292
+ .exercise-summary {
293
+ margin: 0.3rem 0; padding: 0.5rem 0;
294
+ border-bottom: 1px solid var(--border-color);
295
+ font-size: 0.9rem;
296
+ }
297
+ .exercise-summary:last-child { border-bottom: none; }
298
+ .series-summary-container .badge { font-size: 0.7rem; padding: 0.2rem 0.4rem; } /* Badges plus petits dans résumé */
299
+
300
+ /* Satisfaction Slider */
301
+ .satisfaction { display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 1rem; }
302
+ input[type="range"] { accent-color: var(--accent); cursor: pointer;}
303
+ .satisfaction-value { font-size: 2.2rem; color: var(--accent); margin-top: 0.5rem; font-weight: bold; font-family: var(--font-headings); }
304
+
305
+ /* Exercise Navigation */
306
+ .exercise-navigation { display: flex; justify-content: space-between; margin-top: 1.5rem; margin-bottom: 1.5rem; align-items: center;}
307
+ .exercise-navigation span { color: var(--text-secondary); font-style: italic; }
308
+
309
+ /* Login Page */
310
+ #login-page .card { max-width: 400px; margin: 3rem auto; }
311
+ #login-page h2 { text-align: center; margin-bottom: 1.5rem; color: var(--accent); }
312
+ #login-error { color: var(--danger); text-align: center; margin-top: 1rem; font-size: 0.9rem; display: none; min-height: 1.2em; font-weight: bold; }
313
+ #login-form button { margin-top: 1rem; }
314
+ .auth-switch { text-align: center; margin-top: 1.5rem; font-size: 0.9rem; color: var(--text-secondary); }
315
+ .auth-switch a { color: var(--accent); cursor: pointer; text-decoration: underline; font-weight: bold; }
316
+
317
+ /* User Info */
318
+ .user-info { text-align: right; margin-bottom: 1rem; font-size: 0.9rem; color: var(--text-secondary);}
319
+ .user-info strong { color: var(--text-light); margin: 0 5px; }
320
+ .user-info button { margin-left: 0.8rem; padding: 0.3rem 0.7rem; font-size: 0.8rem; }
321
+
322
+ /* Manage Types Page */
323
+ #workout-types-list li {
324
+ display: flex; justify-content: space-between; align-items: center;
325
+ background-color: #2a2a2a; padding: 0.7rem 1rem; /* Padding augmenté */
326
+ margin-bottom: 0.5rem; border-radius: 4px;
327
+ border-left: 4px solid var(--neutral-white); /* Bordure blanche */
328
+ color: var(--text-light); font-weight: bold;
329
+ }
330
+ #add-type-form { display: flex; gap: 0.5rem; align-items: flex-end;}
331
+ #add-type-form input { margin-bottom: 0; flex-grow: 1;}
332
+ #add-type-form button { flex-shrink: 0; }
333
+ #add-type-error { color: var(--danger); font-size: 0.9rem; margin-top: 0.5rem; font-weight: bold; }
334
+
335
+ /* Select Workout Type Page */
336
+ #select-workout-type-page .card { text-align: center; }
337
+ #select-workout-type-page .btn { margin-top: 1rem; width: 80%; } /* Boutons plus larges */
338
+ #select-workout-type { margin-bottom: 1rem;}
339
+
340
+ /* Type Trend Card */
341
+ .type-trend-card { margin-bottom: 1.5rem; }
342
+ .type-trend-card h4 {
343
+ /* Style titre appliqué par défaut */
344
+ color: var(--neutral-white); /* Titre Tendance en Blanc */
345
+ border-bottom: 1px solid var(--border-color);
346
+ padding-bottom: 0.5rem; margin-bottom: 1rem;
347
+ text-transform: uppercase; /* Garde uppercase pour section */
348
+ }
349
+ .type-trend-card ul { list-style: none; padding: 0; font-size: 0.95rem; }
350
+ .type-trend-card li { margin-bottom: 0.6rem; color: var(--text-light); display: flex; justify-content: space-between; border-bottom: 1px dashed #333; padding-bottom: 0.4rem;}
351
+ .type-trend-card li:last-child { border-bottom: none; }
352
+ .type-trend-card li span:first-child { color: var(--text-secondary); font-size: 0.85rem; margin-right: 1rem; } /* Date */
353
+ .type-trend-card li strong { color: var(--accent); } /* Tonnage en accent */
354
+
355
+
356
+ /* Media Queries (inchangées pour la structure, mais les styles héritent) */
357
+ @media (max-width: 600px) {
358
+ .container { padding: 0.8rem; } /* Plus de padding sur mobile */
359
+ h1,h2 { font-size: 1.6rem; }
360
+ .form-row { flex-direction: column; gap: 0.8rem; } /* Plus d'espace en colonne */
361
+ /* Ajustements spécifiques mobile si nécessaire */
362
+ .flex-between { flex-direction: column; align-items: stretch; gap: 0.8rem; }
363
+ .flex-between > div { width: 100%; display: flex; justify-content: center; margin-top: 0.5rem;} /* Boutons centrés */
364
+ .user-info { text-align: center; margin-bottom: 0.8rem;}
365
+ .user-info button { display: block; margin: 0.5rem auto 0;}
366
+ .exercise-navigation button { padding: 0.6rem; font-size: 0.9rem;}
367
+ #add-type-form { flex-direction: column; align-items: stretch;}
368
+ header img#app-logo { max-width: 200px; } /* Logo plus petit sur mobile */
369
+ }
370
+
371
+ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
372
+
373
+ </style>
374
+ </head>
375
+ <body>
376
+ <div class="container">
377
+ <!-- Header modifié avec le logo -->
378
+ <header>
379
+ <img src="input_file_0.png" alt="Cocktail Fitness Logo" id="app-logo">
380
+ <p>Votre suivi de séances personnalisé</p> <!-- Slogan mis à jour -->
381
+ </header>
382
+
383
+ <!-- Login Page (structure inchangée, styles appliqués) -->
384
+ <div id="login-page">
385
+ <div class="card">
386
+ <h2 id="auth-title">Connexion</h2>
387
+ <form id="login-form">
388
+ <div class="form-group"> <label for="auth-email">Email</label> <input type="email" id="auth-email" placeholder="[email protected]" required> </div>
389
+ <div class="form-group"> <label for="auth-password">Mot de passe</label> <input type="password" id="auth-password" placeholder="********" required> </div>
390
+ <p id="login-error"></p>
391
+ <button type="submit" id="auth-action-btn" class="btn" style="width: 100%;">Se Connecter</button>
392
+ </form>
393
+ <div class="auth-switch"> <span id="auth-switch-text">Pas encore de compte ?</span> <a id="auth-switch-link">Inscrivez-vous ici</a> </div>
394
+ </div>
395
+ </div>
396
+
397
+ <!-- Main App Content (structure inchangée) -->
398
+ <div id="main-app-content">
399
+ <div class="user-info">
400
+ Connecté: <strong id="current-user-display"></strong>
401
+ <button id="logout-btn" class="btn btn-outline">Déconnexion</button>
402
+ </div>
403
+
404
+ <div id="app-container">
405
+ <!-- Home Page -->
406
+ <div id="home-page" class="active">
407
+ <div class="flex-between">
408
+ <h2>Mes séances</h2>
409
+ <div>
410
+ <button id="manage-types-btn" class="btn btn-outline" style="margin-right: 0.5rem;">Gérer Types</button>
411
+ <button id="new-workout-btn" class="btn">Nouvelle séance</button>
412
+ </div>
413
+ </div>
414
+ <div id="workouts-list" class="workout-list" style="margin-top: 1.5rem;">
415
+ <div class="spinner hidden"></div>
416
+ <p id="empty-workout-message" class="hidden" style="text-align: center; margin-top: 2rem; color: var(--text-secondary);"> Aucune séance enregistrée. </p>
417
+ </div>
418
+ </div>
419
+
420
+ <!-- Manage Types Page -->
421
+ <div id="manage-types-page">
422
+ <div class="flex-between">
423
+ <h2>Gérer les Types</h2>
424
+ <button class="btn btn-outline back-to-home-btn">Retour</button>
425
+ </div>
426
+ <div class="card">
427
+ <h3>Types Existants</h3>
428
+ <ul id="workout-types-list" style="list-style: none; padding: 0; margin-top: 1rem;">
429
+ <li class="hidden" id="empty-types-message" style="color: var(--text-secondary); background: none; border: none; padding-left: 0;">Aucun type défini.</li>
430
+ </ul>
431
+ <div class="spinner hidden" id="types-spinner"></div>
432
+ </div>
433
+ <div class="card">
434
+ <h3>Ajouter un Type</h3>
435
+ <form id="add-type-form">
436
+ <input type="text" id="new-type-name" placeholder="Nom (ex: Push, Pull, Legs)" required>
437
+ <button type="submit" class="btn">Ajouter</button>
438
+ </form>
439
+ <p id="add-type-error"></p>
440
+ </div>
441
+ </div>
442
+
443
+ <!-- Select Workout Type Page -->
444
+ <div id="select-workout-type-page">
445
+ <div class="flex-between">
446
+ <h2>Démarrer Séance</h2>
447
+ <button class="btn btn-outline back-to-home-btn">Annuler</button>
448
+ </div>
449
+ <div class="card">
450
+ <h3>Séance Structurée</h3>
451
+ <select id="select-workout-type">
452
+ <option value="">-- Sélectionner Type --</option>
453
+ </select>
454
+ <button id="start-structured-workout-btn" class="btn" disabled>Démarrer</button>
455
+ </div>
456
+ <div class="card">
457
+ <h3>Séance Libre</h3>
458
+ <button id="start-free-workout-btn" class="btn btn-info">Démarrer Libre</button>
459
+ </div>
460
+ </div>
461
+
462
+ <!-- New Workout Page -->
463
+ <div id="new-workout-page">
464
+ <div class="flex-between">
465
+ <h2>Nouvelle séance <span id="workout-type-indicator" class="badge type-badge hidden"></span> <span id="current-exercise-indicator" style="font-size: 0.9rem; color: var(--text-secondary); text-transform: none; font-family: var(--font-primary);"></span></h2>
466
+ <div>
467
+ <button id="cancel-new-workout-btn" class="btn btn-outline" style="margin-right: 0.5rem;">Annuler</button>
468
+ <button id="save-workout-btn" class="btn">Enregistrer</button>
469
+ </div>
470
+ </div>
471
+ <div class="card">
472
+ <div class="form-group"> <label for="workout-name">Nom Séance (optionnel)</label> <input type="text" id="workout-name" placeholder="Ex: Séance Haut du Corps..."> </div>
473
+ <div class="form-row">
474
+ <div class="form-group"> <label for="workout-date">Date</label> <input type="date" id="workout-date"> </div>
475
+ <div class="form-group"> <label for="workout-duration">Durée (min)</label> <input type="number" id="workout-duration" min="1" placeholder="60"> </div>
476
+ </div>
477
+ </div>
478
+ <h3 style="margin: 1.5rem 0;">Exercices</h3>
479
+ <div class="exercise-navigation card">
480
+ <button id="prev-exercise-btn" class="btn btn-outline">< Précédent</button>
481
+ <span style="align-self: center; color: var(--text-secondary);">Exercice Actif</span>
482
+ <button id="next-exercise-btn" class="btn btn-outline">Suivant ></button>
483
+ </div>
484
+ <div id="exercises-container"> <!-- Exercices injected here --> </div>
485
+ <button id="add-exercise-btn" class="btn btn-outline" style="width: 100%; margin-top: 1rem;">+ Ajouter Exercice</button>
486
+ <div class="card" style="margin-top: 2rem;">
487
+ <div class="form-group">
488
+ <label for="satisfaction">Satisfaction (1-100%)</label>
489
+ <input type="range" id="satisfaction" min="1" max="100" value="75">
490
+ <div class="satisfaction"> <div class="satisfaction-value">75%</div> </div>
491
+ </div>
492
+ </div>
493
+ </div>
494
+
495
+ <!-- Workout Details Page -->
496
+ <div id="workout-details-page">
497
+ <div class="flex-between">
498
+ <h2>Détail Séance <span id="detail-workout-type" class="badge type-badge hidden"></span></h2>
499
+ <button class="btn btn-outline back-to-home-btn">Retour</button>
500
+ </div>
501
+ <div class="card">
502
+ <div class="workout-details-info">
503
+ <p><strong>Nom:</strong> <span id="detail-workout-name" style="color: var(--text-light); font-weight: normal;"></span></p>
504
+ <div class="form-row" style="margin-top: 0.5rem;">
505
+ <p><strong>Date:</strong> <span id="detail-date" style="color: var(--text-light); font-weight: normal;"></span></p>
506
+ <p><strong>Durée:</strong> <span id="detail-duration" style="color: var(--text-light); font-weight: normal;"></span> min</p>
507
+ </div>
508
+ </div>
509
+ </div>
510
+ <div class="stats-grid" style="margin-top: 1.5rem;">
511
+ <div class="card stat-card"> <div class="stat-value" id="detail-tonnage">0</div> <div>Tonnage (kg)</div> </div>
512
+ <div class="card stat-card"> <div class="stat-value" id="detail-satisfaction">0%</div> <div>Satisfaction</div> </div>
513
+ <div class="card stat-card"> <div class="stat-value" id="detail-exercises-count">0</div> <div>Exercices</div> </div>
514
+ </div>
515
+ <h3 style="margin: 1.5rem 0 1rem;">Exercices Réalisés</h3>
516
+ <div id="detail-exercises-container"> <!-- Details injected here --> </div>
517
+ <button id="delete-workout-btn" class="btn btn-danger" style="width: 100%; margin-top: 2rem;">Supprimer Séance</button>
518
+ </div>
519
+
520
+ <!-- Stats Page -->
521
+ <div id="stats-page">
522
+ <h2>Statistiques Générales</h2>
523
+ <div class="stats-grid">
524
+ <div class="card stat-card"> <div class="stat-value" id="stats-workout-count">0</div> <div>Séances Totales</div> </div>
525
+ <div class="card stat-card"> <div class="stat-value" id="stats-avg-tonnage">0</div> <div>Tonnage Moyen / Séance</div> </div>
526
+ <div class="card stat-card"> <div class="stat-value" id="stats-avg-satisfaction">0%</div> <div>Satisfaction Moyenne</div> </div>
527
+ </div>
528
+ <h3 style="margin: 2rem 0 1rem;">Tendances par Type</h3>
529
+ <div id="type-trends-container">
530
+ <p id="no-trends-message" style="text-align: center; color: var(--text-secondary);" class="hidden"> Pas assez de données pour afficher les tendances par type. </p>
531
+ <div class="spinner hidden" id="trends-spinner"></div>
532
+ <!-- Trends injected here -->
533
+ </div>
534
+ </div>
535
+
536
+ </div> <!-- Fin #app-container -->
537
+
538
+ <!-- Bottom Navigation -->
539
+ <nav class="nav-bottom">
540
+ <a href="#" class="nav-item active" data-page="home-page"> <div class="nav-icon">📋</div> <div>Séances</div> </a>
541
+ <a href="#" class="nav-item" data-page="stats-page"> <div class="nav-icon">📊</div> <div>Stats</div> </a>
542
+ </nav>
543
+
544
+ </div> <!-- Fin #main-app-content -->
545
+ </div> <!-- Fin .container -->
546
+
547
+ <!-- JavaScript (Identique à l'original, sauf mentions textuelles si besoin) -->
548
+ <script>
549
+ // Firebase Init (Identique)
550
+ const firebaseConfig = { apiKey: "AIzaSyAkWvrRyXgrC7zbTtoh_GppsHMrz2rF7WM", authDomain: "lifttrackapp.firebaseapp.com", projectId: "lifttrackapp", storageBucket: "lifttrackapp.appspot.com", messagingSenderId: "594426771796", appId: "1:594426771796:web:789bef037ca0016c54b0c1", measurementId: "G-MXLFK0H160" };
551
+ let app, auth, db; try { app = firebase.initializeApp(firebaseConfig); auth = firebase.auth(); db = firebase.firestore(); console.log("Firebase Initialisé !"); } catch (e) { console.error("Erreur Init Firebase:", e); alert("Erreur connexion DB."); }
552
+
553
+ // --- Variables d'État --- (Inchangé)
554
+ let workouts = []; let currentWorkoutId = null; let currentExerciseIndex = 0; let workoutExercisesForm = []; let currentFirebaseUser = null; let userWorkoutTypes = []; let selectedWorkoutTypeName = null;
555
+
556
+ // --- Éléments DOM --- (Inchangé, les variables pointeront toujours vers les bons ID)
557
+ const loginPage = document.getElementById('login-page'); const mainAppContent = document.getElementById('main-app-content'); const authEmailInput = document.getElementById('auth-email'); const authPasswordInput = document.getElementById('auth-password'); const loginForm = document.getElementById('login-form'); const authActionButton = document.getElementById('auth-action-btn'); const authSwitchLink = document.getElementById('auth-switch-link'); const authTitle = document.getElementById('auth-title'); const authSwitchText = document.getElementById('auth-switch-text'); 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 backToHomeBtns = document.querySelectorAll('.back-to-home-btn'); 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'); const workoutTypeIndicator = document.getElementById('workout-type-indicator'); const detailWorkoutType = document.getElementById('detail-workout-type'); const manageTypesBtn = document.getElementById('manage-types-btn'); const manageTypesPage = document.getElementById('manage-types-page'); const workoutTypesList = document.getElementById('workout-types-list'); const emptyTypesMessage = document.getElementById('empty-types-message'); const typesSpinner = document.getElementById('types-spinner'); const addTypeForm = document.getElementById('add-type-form'); const newTypeNameInput = document.getElementById('new-type-name'); const addTypeError = document.getElementById('add-type-error'); const selectWorkoutTypePage = document.getElementById('select-workout-type-page'); const selectWorkoutTypeDropdown = document.getElementById('select-workout-type'); const startStructuredWorkoutBtn = document.getElementById('start-structured-workout-btn'); const startFreeWorkoutBtn = document.getElementById('start-free-workout-btn');
558
+ const statsWorkoutCountEl = document.getElementById('stats-workout-count'); const statsAvgTonnageEl = document.getElementById('stats-avg-tonnage'); const statsAvgSatisfactionEl = document.getElementById('stats-avg-satisfaction');
559
+ const typeTrendsContainer = document.getElementById('type-trends-container');
560
+ const noTrendsMessage = document.getElementById('no-trends-message');
561
+ const trendsSpinner = document.getElementById('trends-spinner');
562
+ let isLoginMode = true;
563
+
564
+ // ===========================================
565
+ // --- DÉFINITION DES FONCTIONS --- (JavaScript Inchangé)
566
+ // ===========================================
567
+
568
+ function initAuthListener() { /* ... */ if (!auth) return; auth.onAuthStateChanged(user => { console.log("Auth state:", user ? user.uid : 'null'); if (user) { currentFirebaseUser = user; showApp(); } else { currentFirebaseUser = null; workouts = []; userWorkoutTypes = []; renderWorkoutsList(); renderWorkoutTypesList(); showLoginPage(); } }); }
569
+ function showLoginPage() { /* ... */ if(loginPage) loginPage.style.display = 'block'; if(mainAppContent) mainAppContent.style.display = 'none'; }
570
+ function showApp() { /* ... */ if (!currentFirebaseUser || !mainAppContent) return; console.log("Affichage App"); if(loginPage) loginPage.style.display = 'none'; mainAppContent.style.display = 'block'; if(currentUserDisplay) currentUserDisplay.textContent = currentFirebaseUser.email; setTodayDate(); loadWorkouts(); loadWorkoutTypes(); showPage('home-page'); }
571
+ function handleAuthAction(event) { /* ... */ if(!auth) return; event.preventDefault(); const email = authEmailInput.value; const password = authPasswordInput.value; loginError.textContent = ''; if (!email || !password) { loginError.textContent = 'Email et Mot de passe requis.'; return; } authActionButton.disabled = true; authActionButton.textContent = 'Chargement...'; if (isLoginMode) { auth.signInWithEmailAndPassword(email, password).catch(handleAuthError).finally(() => { authActionButton.disabled = false; authActionButton.textContent = 'Se Connecter'; }); } else { auth.createUserWithEmailAndPassword(email, password).catch(handleAuthError).finally(() => { authActionButton.disabled = false; authSwitchMode(); authActionButton.textContent = 'S\'inscrire'; }); } }
572
+ function handleLogout() { /* ... */ if(!auth) return; console.log("Déconnexion..."); auth.signOut().catch(handleAuthError); }
573
+ function authSwitchMode() { /* ... */ isLoginMode = !isLoginMode; loginError.textContent = ''; authTitle.textContent=isLoginMode?'Connexion':'Inscription'; authActionButton.textContent=isLoginMode?'Se Connecter':'S\'inscrire'; authSwitchText.textContent=isLoginMode?'Pas de compte ?':'Déjà un compte ?'; authSwitchLink.textContent=isLoginMode?'Inscrivez-vous':'Connectez-vous'; }
574
+ function handleAuthError(error) { /* ... */ console.error("Erreur Auth:", error); loginError.textContent = getAuthErrorMessage(error); }
575
+ function getAuthErrorMessage(error) { /* ... */ switch (error.code) { case 'auth/invalid-email': return 'Format d\'email invalide.'; case 'auth/user-disabled': return 'Ce compte utilisateur a été désactivé.'; case 'auth/user-not-found': return 'Aucun utilisateur trouvé avec cet email.'; case 'auth/wrong-password': return 'Mot de passe incorrect.'; case 'auth/email-already-in-use': return 'Cet email est déjà utilisé par un autre compte.'; case 'auth/weak-password': return 'Le mot de passe est trop faible (minimum 6 caractères).'; case 'auth/operation-not-allowed': return 'Connexion par email/mot de passe non activée.'; default: return 'Erreur d\'authentification. Veuillez réessayer.'; } }
576
+ function loadWorkoutTypes() { /* ... */ if (!currentFirebaseUser || !db) return; const userId = currentFirebaseUser.uid; console.log("Chargement types..."); userWorkoutTypes = []; if (typesSpinner) typesSpinner.classList.remove('hidden'); db.collection('workoutTypes').where('userId', '==', userId).orderBy('name').get().then(snapshot => { snapshot.forEach(doc => userWorkoutTypes.push({ id: doc.id, ...doc.data() })); console.log("Types chargés:", userWorkoutTypes); renderWorkoutTypesList(); populateWorkoutTypeSelector(); }).catch(handleFirestoreError).finally(() => { if (typesSpinner) typesSpinner.classList.add('hidden'); }); }
577
+ function renderWorkoutTypesList() { /* ... */ if (!workoutTypesList) return; workoutTypesList.innerHTML = ''; if (userWorkoutTypes.length === 0) { if(emptyTypesMessage) emptyTypesMessage.classList.remove('hidden'); } else { if(emptyTypesMessage) emptyTypesMessage.classList.add('hidden'); userWorkoutTypes.forEach(type => { const li = document.createElement('li'); li.textContent = type.name; /* Bouton Supprimer peut être ajouté ici si besoin */ workoutTypesList.appendChild(li); }); } }
578
+ function handleAddWorkoutType(event) { /* ... */ event.preventDefault(); if (!currentFirebaseUser || !newTypeNameInput || !db) return; const typeName = newTypeNameInput.value.trim(); addTypeError.textContent = ''; if (!typeName) { addTypeError.textContent = "Le nom du type ne peut pas être vide."; return; } if (userWorkoutTypes.some(t => t.name.toLowerCase() === typeName.toLowerCase())) { addTypeError.textContent = "Ce type de séance existe déjà."; return; } console.log("Ajout type:", typeName); const typeData = { userId: currentFirebaseUser.uid, name: typeName }; db.collection('workoutTypes').add(typeData).then(() => { console.log("Type ajouté avec succès"); newTypeNameInput.value = ''; loadWorkoutTypes(); }).catch(handleFirestoreError); }
579
+ function populateWorkoutTypeSelector() { /* ... */ if (!selectWorkoutTypeDropdown) return; selectWorkoutTypeDropdown.innerHTML = '<option value="">-- Sélectionner Type --</option>'; userWorkoutTypes.forEach(type => { const option = document.createElement('option'); option.value = type.name; option.textContent = type.name; selectWorkoutTypeDropdown.appendChild(option); }); updateStartStructuredBtnState(); }
580
+ function updateStartStructuredBtnState() { /* ... */ if (!selectWorkoutTypeDropdown || !startStructuredWorkoutBtn) return; startStructuredWorkoutBtn.disabled = !selectWorkoutTypeDropdown.value; }
581
+ function loadWorkouts() { /* ... */ if (!currentFirebaseUser || !db) { console.log("Chargement séances annulé (non connecté)."); workouts = []; renderWorkoutsList(); /* Pas besoin de showPage ici, géré par auth listener */ return; } const userId = currentFirebaseUser.uid; console.log(`Chargement séances pour ${userId}...`); if (spinner) spinner.classList.remove('hidden'); if(emptyWorkoutMessage) emptyWorkoutMessage.classList.add('hidden'); if(workoutsList) workoutsList.innerHTML = ''; workouts = []; db.collection('workouts').where('userId', '==', userId).orderBy('date', 'desc').get().then((querySnapshot) => { console.log(`${querySnapshot.size} séances trouvées.`); querySnapshot.forEach((doc) => { const workoutData = doc.data(); workoutData.firestoreId = doc.id; workouts.push(workoutData); }); renderWorkoutsList(); updateStats(); /* MAJ stats après chargement */ }).catch(handleFirestoreError).finally(() => { if (spinner) spinner.classList.add('hidden'); }); }
582
+ function saveWorkout() { /* ... */ if (!currentFirebaseUser || !db) { alert("Vous devez être connecté pour enregistrer."); return; } const userId = currentFirebaseUser.uid; workoutExercisesForm = Array.from(exercisesContainer.querySelectorAll('.exercise')); const workoutNameInput = document.getElementById('workout-name'); const workoutName = workoutNameInput ? workoutNameInput.value.trim() : ''; const workoutDate = workoutDateInput.value; const workoutDurationInput = document.getElementById('workout-duration'); const workoutDuration = workoutDurationInput ? parseInt(workoutDurationInput.value) || 0 : 0; const satisfaction = satisfactionRange ? parseInt(satisfactionRange.value) : 75; if (!selectedWorkoutTypeName) { alert("Erreur : Type de séance non défini. Veuillez recommencer."); showPage('home-page'); return; } if (!workoutDate) { alert("Veuillez sélectionner une date pour la séance."); if(workoutDateInput) workoutDateInput.focus(); return; } if (workoutDuration <= 0) { alert("Veuillez entrer une durée valide pour la séance."); if(workoutDurationInput) workoutDurationInput.focus(); return; } const exerciseElements = workoutExercisesForm; const exercises = []; if (exerciseElements.length === 0) { alert("Veuillez ajouter au moins un exercice à votre séance."); return; } let validationError = null; exerciseElements.forEach((exerciseEl, index) => { if (validationError) return; const nameInput = exerciseEl.querySelector('.exercise-name'); const exerciseName = nameInput ? nameInput.value.trim() : ''; const unilateralCheckbox = exerciseEl.querySelector('.unilateral-checkbox'); const isUnilateral = unilateralCheckbox ? unilateralCheckbox.checked : false; if (!exerciseName) { validationError = `Veuillez nommer l'exercice #${index + 1}.`; 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; } seriesElements.forEach((seriesEl, sIndex) => { if (validationError) return; const repsInput = seriesEl.querySelector('.reps'); const weightInput = seriesEl.querySelector('.weight'); const degressiveCheckbox = seriesEl.querySelector('.degressive-checkbox'); const reps = repsInput ? parseInt(repsInput.value) || 0 : 0; const weight = weightInput ? parseFloat(weightInput.value) || 0 : 0; const isDegressive = degressiveCheckbox ? degressiveCheckbox.checked : false; if (reps <= 0) { validationError = `Nombre de répétitions invalide pour la série ${sIndex + 1} de l'exercice "${exerciseName}".`; if(repsInput) repsInput.focus(); return; } if (weight < 0) { validationError = `La charge ne peut pas être négative pour la série ${sIndex + 1} de l'exercice "${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 finalWorkoutName = workoutName || selectedWorkoutTypeName; const workout = { id: currentWorkoutId || db.collection('workouts').doc().id, /* Génère ID Firestore */ userId: userId, workoutTypeName: selectedWorkoutTypeName, name: finalWorkoutName, date: workoutDate, duration: workoutDuration, exercises: exercises, totalTonnage: totalTonnage, satisfaction: satisfaction }; console.log("Sauvegarde de la séance:", workout); saveWorkoutBtn.disabled = true; saveWorkoutBtn.textContent = 'Sauvegarde...'; db.collection('workouts').doc(workout.id).set(workout).then(() => { console.log("Séance sauvegardée avec succès:", workout.id); const existingIndex = workouts.findIndex(w => w.id === workout.id); if (existingIndex > -1) workouts[existingIndex] = workout; else workouts.push(workout); try { confetti({ particleCount: 150, spread: 90, origin: { y: 0.6 } }); } catch(e) { console.warn("Confetti error:", e)} showPage('home-page'); loadWorkouts(); // Recharger pour être sûr et màj stats }).catch(handleFirestoreError).finally(() => { saveWorkoutBtn.disabled = false; saveWorkoutBtn.textContent = 'Enregistrer Séance'; }); }
583
+ function deleteWorkout() { /* ... */ if (!currentFirebaseUser || !currentWorkoutId || !db) return; const workoutToDelete = workouts.find(w => w.id === currentWorkoutId); if (!workoutToDelete) { console.error("Séance à supprimer non trouvée localement."); return; } const confirmDelete = confirm(`Êtes-vous sûr de vouloir supprimer la séance "${workoutToDelete.name}" du ${new Date(workoutToDelete.date).toLocaleDateString('fr-FR')} ? Cette action est irréversible.`); if (!confirmDelete) return; console.log("Suppression de la séance:", currentWorkoutId); deleteWorkoutBtn.disabled = true; deleteWorkoutBtn.textContent = 'Suppression...'; db.collection('workouts').doc(currentWorkoutId).delete().then(() => { console.log("Séance supprimée avec succès:", currentWorkoutId); workouts = workouts.filter(w => w.id !== currentWorkoutId); currentWorkoutId = null; showPage('home-page'); renderWorkoutsList(); updateStats(); }).catch(handleFirestoreError).finally(() => { deleteWorkoutBtn.disabled = false; deleteWorkoutBtn.textContent = 'Supprimer Séance'; }); }
584
+ function setTodayDate() { /* ... */ if(workoutDateInput) try { workoutDateInput.value = new Date().toISOString().split('T')[0]; } catch(e){ console.error("Erreur lors de la définition de la date:", e); }}
585
+ function showPage(pageId) { /* ... */ console.log(`Affichage page: ${pageId}`); if (!currentFirebaseUser && pageId !== 'login-page') { console.log("Non connecté, redirection vers login."); showLoginPage(); return; } document.querySelectorAll('#app-container > div').forEach(page => page.classList.remove('active')); const pageToShow = document.getElementById(pageId); if (pageToShow) { pageToShow.classList.add('active'); window.scrollTo(0, 0); // Scroll en haut de page if (pageId === 'new-workout-page') { if (!selectedWorkoutTypeName) { console.warn("Entrée sur new-workout-page sans type sélectionné, retour home."); showPage('home-page'); return; } /* triggerFlameAnimation(); // Optionnel */ renderActiveExerciseForm(); updateWorkoutTypeIndicator(); } if (pageId === 'manage-types-page') { loadWorkoutTypes(); } if (pageId === 'select-workout-type-page') { populateWorkoutTypeSelector(); } if (pageId === 'stats-page') { updateStats(); } if (pageId === 'workout-details-page' && !currentWorkoutId) { console.warn("Tentative d'accès détails sans ID, retour home."); showPage('home-page'); return; } } else { console.error(`Page ID "${pageId}" non trouvée. Retour à l'accueil.`); document.getElementById('home-page').classList.add('active'); pageId = 'home-page'; } navItems.forEach(item => { item.classList.remove('active'); }); /* Correction: Ne pas se baser que sur stats-page pour la nav */ const currentPageForNav = ['home-page', 'manage-types-page', 'select-workout-type-page', 'new-workout-page', 'workout-details-page'].includes(pageId) ? 'home-page' : pageId; const activeNavItem = document.querySelector(`.nav-item[data-page="${currentPageForNav}"]`); if(activeNavItem) activeNavItem.classList.add('active'); }
586
+ function triggerFlameAnimation() { /* ... */ const duration = 1 * 1000; const animationEnd = Date.now() + duration; const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }; function randomInRange(min, max) { return Math.random() * (max - min) + min; } const interval = setInterval(function() { const timeLeft = animationEnd - Date.now(); if (timeLeft <= 0) return clearInterval(interval); const particleCount = 50 * (timeLeft / duration); try{ confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.3, 0.7), y: Math.random() - 0.2 }, angle: randomInRange(240, 300), spread: randomInRange(50, 90), gravity: 0.5, drift: randomInRange(-1, 1), colors: ['#ff6f00', '#ff8f00', '#ffa000', '#ffcc00'] })); } catch(e){console.warn("Confetti error:", e); clearInterval(interval);} }, 250); }
587
+ function handleAddNewExercise() { /* ... */ addExercise(true); }
588
+ function addExercise(navigateToNew = false) { /* ... */ if (!currentFirebaseUser) return; const exerciseId = `exercise-${Date.now()}`; const exerciseDiv = document.createElement('div'); exerciseDiv.className = 'card exercise'; // Ajout classe card pour style cohérent exerciseDiv.setAttribute('data-exercise-id', exerciseId); exerciseDiv.innerHTML = `<div class="exercise-header"> <input type="text" placeholder="Nom Exercice (ex: Développé Couché)" 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: var(--text-secondary); font-size: 0.9rem; font-weight: normal;"> <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: 1rem; padding: 0.4rem;">+ Ajouter Série</button>`; // Bouton série style cohérent exercisesContainer.appendChild(exerciseDiv); workoutExercisesForm = Array.from(exercisesContainer.querySelectorAll('.exercise')); const removeBtn = exerciseDiv.querySelector('.remove-exercise'); removeBtn.addEventListener('click', () => { const indexToRemove = workoutExercisesForm.findIndex(el => el === exerciseDiv); if (indexToRemove > -1) { exerciseDiv.remove(); workoutExercisesForm.splice(indexToRemove, 1); // Mettre à jour le tableau interne if (currentExerciseIndex >= indexToRemove && currentExerciseIndex > 0) { currentExerciseIndex--; // Décrémenter si on supprime avant ou l'actuel (sauf si c'est le premier) } if (currentExerciseIndex >= workoutExercisesForm.length) { // Si on a supprimé le dernier currentExerciseIndex = Math.max(0, workoutExercisesForm.length - 1); } renderActiveExerciseForm(); // Rafraîchir la vue } }); const addSeriesBtn = exerciseDiv.querySelector('.add-series'); const seriesContainer = exerciseDiv.querySelector('.series-container'); addSeriesBtn.addEventListener('click', () => addSeries(seriesContainer)); addSeries(seriesContainer); // Ajoute une série par défaut if (navigateToNew) { currentExerciseIndex = workoutExercisesForm.length - 1; renderActiveExerciseForm(); // Focus sur le nouvel exercice ajouté } else { updateExerciseNavButtons(); // Met à jour juste les boutons si on n'a pas navigué } }
589
+ function addSeries(container) { /* ... */ if (!currentFirebaseUser || !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 style="font-weight: normal; font-size: 0.8rem;">Reps</label> <input type="number" class="reps" min="1" placeholder="10" style="padding: 0.5rem;"> </div> <div class="form-group" style="flex: 1.2;"> <label style="font-weight: normal; font-size: 0.8rem;">Charge (kg)</label> <input type="number" class="weight" min="0" step="0.1" placeholder="20" style="padding: 0.5rem;"> </div> <div class="form-group" style="flex: 1; display: flex; align-items: center; padding-bottom: 0.8rem; min-width: 100px;"> <label style="display: inline-flex; align-items: center; color: var(--text-secondary); font-size: 0.8rem; margin-bottom: 0; white-space: nowrap; font-weight: normal;"> <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.8rem; flex-basis: 30px; flex-grow: 0; align-self: center;" aria-label="Supprimer série">×</button> </div>`; container.appendChild(seriesDiv); const removeBtn = seriesDiv.querySelector('.remove-series'); removeBtn.addEventListener('click', () => seriesDiv.remove()); }
590
+ function navigateExerciseForm(direction) { /* ... */ workoutExercisesForm = Array.from(exercisesContainer.querySelectorAll('.exercise')); const newIndex = currentExerciseIndex + direction; if (newIndex >= 0 && newIndex < workoutExercisesForm.length) { currentExerciseIndex = newIndex; renderActiveExerciseForm(); } }
591
+ function renderActiveExerciseForm() { /* ... */ workoutExercisesForm = Array.from(exercisesContainer.querySelectorAll('.exercise')); workoutExercisesForm.forEach((ex, index) => { if (index === currentExerciseIndex) { ex.classList.add('active-exercise'); ex.style.display = 'block'; // Assure la visibilité } else { ex.classList.remove('active-exercise'); ex.style.display = 'none'; // Cache les inactifs } }); updateExerciseNavButtons(); }
592
+ function updateExerciseNavButtons() { /* ... */ const totalExercises = workoutExercisesForm.length; if (!currentExerciseIndicator || !prevExerciseBtn || !nextExerciseBtn) return; 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; } }
593
+ function clearNewWorkoutForm(typeName = "Libre") { /* ... */ console.log("Nettoyage formulaire pour type:", typeName); if (!currentFirebaseUser) return; selectedWorkoutTypeName = typeName; const workoutNameInput = document.getElementById('workout-name'); if(workoutNameInput) workoutNameInput.value = (typeName === "Libre" ? "" : typeName); if(workoutDateInput) setTodayDate(); const durationInput = document.getElementById('workout-duration'); if(durationInput) durationInput.value = '60'; // Default 60 min if(exercisesContainer) exercisesContainer.innerHTML = ''; workoutExercisesForm = []; if(satisfactionRange) satisfactionRange.value = 75; if(satisfactionValue) satisfactionValue.textContent = '75%'; currentWorkoutId = null; // Assure qu'on crée un nouveau workout currentExerciseIndex = 0; addExercise(false); // Ajoute le premier exercice sans naviguer updateWorkoutTypeIndicator(); renderActiveExerciseForm(); }
594
+ function updateWorkoutTypeIndicator() { /* ... */ if (!workoutTypeIndicator) return; if (selectedWorkoutTypeName && selectedWorkoutTypeName !== "Libre") { workoutTypeIndicator.textContent = selectedWorkoutTypeName; workoutTypeIndicator.classList.remove('hidden'); } else { workoutTypeIndicator.classList.add('hidden'); } }
595
+ function renderWorkoutsList() { /* ... */ if (!currentFirebaseUser || !workoutsList || !emptyWorkoutMessage) { if(workoutsList) workoutsList.innerHTML = ''; if(emptyWorkoutMessage) emptyWorkoutMessage.classList.remove('hidden'); console.warn("Impossible de rendre la liste: user non connecté ou éléments DOM manquants."); updateStats(); // Mettre à jour les stats même si la liste est vide return; } workoutsList.innerHTML = ''; if (workouts.length === 0) { emptyWorkoutMessage.classList.remove('hidden'); } else { 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); const typeBadge = workout.workoutTypeName && workout.workoutTypeName !== "Libre" ? `<span class="badge type-badge" style="margin-left: 8px;">${workout.workoutTypeName}</span>` : ''; workoutDiv.innerHTML = `<div class="workout-header"><h3 style="margin-bottom: 0.5rem;">${workout.name} ${typeBadge}</h3><div class="badge">${workoutDate}</div></div><div class="workout-details"><span>${workout.duration} min</span> | <span>${workout.exercises.length} exo${workout.exercises.length > 1 ? 's' : ''}</span> | <span>${(workout.totalTonnage || 0).toFixed(1)} kg</span> | <span>${workout.satisfaction}%</span></div>`; workoutDiv.addEventListener('click', () => displayWorkoutDetails(workout.id)); workoutsList.appendChild(workoutDiv); }); } /* updateStats est appelé séparément après loadWorkouts ou deleteWorkout */ }
596
+ function displayWorkoutDetails(workoutId) { /* ... */ if (!currentFirebaseUser) return; const workout = workouts.find(w => w.id === workoutId); if (!workout) { alert("Détails de la séance introuvables."); showPage('home-page'); return; } const detailNameEl = document.getElementById('detail-workout-name'); const detailDateEl = document.getElementById('detail-date'); const detailDurationEl = document.getElementById('detail-duration'); const detailTonnageEl = document.getElementById('detail-tonnage'); const detailSatisfactionEl = document.getElementById('detail-satisfaction'); const detailExercisesCountEl = document.getElementById('detail-exercises-count'); const detailExercisesContainer = document.getElementById('detail-exercises-container'); if(detailWorkoutType) { if (workout.workoutTypeName && workout.workoutTypeName !== "Libre") { detailWorkoutType.textContent = workout.workoutTypeName; detailWorkoutType.classList.remove('hidden'); } else detailWorkoutType.classList.add('hidden'); } if(detailNameEl) detailNameEl.textContent = workout.name; if(detailDateEl) detailDateEl.textContent = new Date(workout.date).toLocaleDateString('fr-FR'); if(detailDurationEl) detailDurationEl.textContent = workout.duration; if(detailTonnageEl) detailTonnageEl.textContent = (workout.totalTonnage || 0).toFixed(1); if(detailSatisfactionEl) detailSatisfactionEl.textContent = `${workout.satisfaction}%`; if(detailExercisesCountEl) detailExercisesCountEl.textContent = workout.exercises.length; if(detailExercisesContainer) { detailExercisesContainer.innerHTML = ''; workout.exercises.forEach((exercise) => { const exerciseDiv = document.createElement('div'); exerciseDiv.className = 'card detail-exercise-card'; // Reuse card style let seriesHtml = ''; exercise.series.forEach((serie, sIndex) => { const degressiveLabel = serie.isDegressive ? ' <span class="badge" style="font-size: 0.7rem; background-color: var(--info); color: var(--text-light);">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: var(--text-secondary);">(${seriesTonnage.toFixed(1)} kg)</span></div></div>`; }); const unilateralLabel = exercise.isUnilateral ? ' <span class="badge" style="font-size: 0.7rem; background-color: var(--info); color: var(--text-light);">Unilat.</span>' : ''; exerciseDiv.innerHTML = `<h4 style="font-size: 1.1rem; margin-bottom: 0.8rem; color: var(--text-light); text-transform: none; font-family: var(--font-primary); letter-spacing: normal;">${exercise.name}${unilateralLabel}</h4> <div class="series-summary-container"> ${seriesHtml} </div>`; detailExercisesContainer.appendChild(exerciseDiv); }); } currentWorkoutId = workoutId; showPage('workout-details-page'); }
597
+
598
+ // --- Fonctionnalité STATS (Avec tendances) --- (Inchangé logiquement, utilise nouvelles couleurs/styles)
599
+ function updateStats() {
600
+ console.log("Mise à jour des statistiques...");
601
+ if (!currentFirebaseUser) { console.log("Stats: non connecté."); return; }
602
+ if (!statsWorkoutCountEl || !statsAvgTonnageEl || !statsAvgSatisfactionEl) { console.warn("Éléments DOM des stats manquants."); return; }
603
+ const workoutCount = workouts.length;
604
+ statsWorkoutCountEl.textContent = workoutCount;
605
+
606
+ if (workoutCount === 0) {
607
+ statsAvgTonnageEl.textContent = '0';
608
+ statsAvgSatisfactionEl.textContent = '0%';
609
+ renderTypeTrends({});
610
+ return;
611
+ }
612
+ const totalTonnageAll = workouts.reduce((sum, w) => sum + (w.totalTonnage || 0), 0);
613
+ statsAvgTonnageEl.textContent = (totalTonnageAll / workoutCount).toFixed(1);
614
+ const totalSatisfaction = workouts.reduce((sum, w) => sum + (w.satisfaction || 0), 0);
615
+ statsAvgSatisfactionEl.textContent = `${Math.round(totalSatisfaction / workoutCount)}%`;
616
+
617
+ console.log("Calcul tendances par type...");
618
+ const trendsData = {};
619
+ const structuredWorkouts = workouts.filter(w => w.workoutTypeName && w.workoutTypeName !== "Libre");
620
+ const groupedByType = structuredWorkouts.reduce((acc, workout) => {
621
+ const type = workout.workoutTypeName;
622
+ if (!acc[type]) acc[type] = [];
623
+ acc[type].push(workout);
624
+ return acc;
625
+ }, {});
626
+
627
+ for (const typeName in groupedByType) {
628
+ const sessionsOfType = groupedByType[typeName].sort((a, b) => new Date(a.date) - new Date(b.date)); // Tri chronologique
629
+ // Prend les 3 dernières séances pour la tendance
630
+ trendsData[typeName] = sessionsOfType.slice(-3).map(s => ({ date: s.date, tonnage: s.totalTonnage || 0 }));
631
+ }
632
+ console.log("Données tendances:", trendsData);
633
+ renderTypeTrends(trendsData);
634
+ }
635
+
636
+ function renderTypeTrends(trends) {
637
+ if (!typeTrendsContainer || !noTrendsMessage) { console.error("Éléments DOM pour tendances manquants."); return;}
638
+ if (trendsSpinner) trendsSpinner.classList.add('hidden'); // Cacher spinner
639
+ typeTrendsContainer.innerHTML = ''; // Vider
640
+ const trendTypes = Object.keys(trends);
641
+
642
+ if (trendTypes.length === 0) {
643
+ noTrendsMessage.classList.remove('hidden');
644
+ } else {
645
+ noTrendsMessage.classList.add('hidden');
646
+ trendTypes.sort().forEach(typeName => {
647
+ const typeData = trends[typeName];
648
+ if (!typeData || typeData.length === 0) return;
649
+
650
+ const card = document.createElement('div');
651
+ card.className = 'card type-trend-card';
652
+ let listItems = '';
653
+ typeData.forEach(session => {
654
+ const formattedDate = new Date(session.date).toLocaleDateString('fr-FR', { day: '2-digit', month: 'short' });
655
+ const tonnageText = (session.tonnage !== undefined && session.tonnage !== null) ? `${session.tonnage.toFixed(1)} kg` : 'N/A';
656
+ listItems += `<li><span>${formattedDate}</span> <strong>${tonnageText}</strong></li>`;
657
+ });
658
+ // Utilise h4 pour le type, hérite du style des titres
659
+ card.innerHTML = `<h4>${typeName} (3 Dernières)</h4><ul>${listItems}</ul>`;
660
+ typeTrendsContainer.appendChild(card);
661
+ });
662
+ }
663
+ }
664
+ function handleFirestoreError(error) { console.error("Erreur Firestore:", error); alert(`Erreur de base de données: ${error.message}`); }
665
+
666
+ // --- ÉCOUTEURS D'ÉVÉNEMENTS --- (Inchangé)
667
+ function initEventListeners() {
668
+ console.log("initEventListeners: Attachement des écouteurs...");
669
+ if (loginForm) loginForm.addEventListener('submit', handleAuthAction); else console.error("!loginForm");
670
+ if (authSwitchLink) authSwitchLink.addEventListener('click', authSwitchMode); else console.error("!authSwitchLink");
671
+ if (logoutBtn) logoutBtn.addEventListener('click', handleLogout); else console.error("!logoutBtn");
672
+ navItems.forEach((item, index) => { if(item) item.addEventListener('click', (e) => { e.preventDefault(); if (!currentFirebaseUser && item.getAttribute('data-page') !== 'login-page') { showLoginPage(); return; } const targetPageId = item.getAttribute('data-page'); showPage(targetPageId); }); else console.error(`!navItem #${index}`); });
673
+ if (newWorkoutBtn) newWorkoutBtn.addEventListener('click', () => { if (!currentFirebaseUser) return; showPage('select-workout-type-page'); }); else console.error("!newWorkoutBtn");
674
+ if (manageTypesBtn) manageTypesBtn.addEventListener('click', () => showPage('manage-types-page')); else console.error("!manageTypesBtn");
675
+ if (addTypeForm) addTypeForm.addEventListener('submit', handleAddWorkoutType); else console.error("!addTypeForm");
676
+ if (selectWorkoutTypeDropdown) selectWorkoutTypeDropdown.addEventListener('change', updateStartStructuredBtnState); else console.error("!selectWorkoutTypeDropdown");
677
+ if (startStructuredWorkoutBtn) startStructuredWorkoutBtn.addEventListener('click', () => { if(selectWorkoutTypeDropdown) { const type = selectWorkoutTypeDropdown.value; if(type) { clearNewWorkoutForm(type); showPage('new-workout-page'); } else { alert("Veuillez sélectionner un type de séance.");} } }); else console.error("!startStructuredWorkoutBtn");
678
+ if (startFreeWorkoutBtn) startFreeWorkoutBtn.addEventListener('click', () => { clearNewWorkoutForm("Libre"); showPage('new-workout-page'); }); else console.error("!startFreeWorkoutBtn");
679
+ backToHomeBtns.forEach(btn => { if(btn) btn.addEventListener('click', () => showPage('home-page')); else console.error("!backToHomeBtn"); });
680
+ if (cancelNewWorkoutBtn) cancelNewWorkoutBtn.addEventListener('click', () => { if(confirm("Êtes-vous sûr de vouloir annuler cette séance ? Les données non enregistrées seront perdues.")) showPage('home-page'); }); else console.error("!cancelNewWorkoutBtn");
681
+ if (saveWorkoutBtn) saveWorkoutBtn.addEventListener('click', saveWorkout); else console.error("!saveWorkoutBtn");
682
+ if (addExerciseBtn) addExerciseBtn.addEventListener('click', handleAddNewExercise); else console.error("!addExerciseBtn");
683
+ if (prevExerciseBtn) prevExerciseBtn.addEventListener('click', () => navigateExerciseForm(-1)); else console.error("!prevExerciseBtn");
684
+ if (nextExerciseBtn) nextExerciseBtn.addEventListener('click', () => navigateExerciseForm(1)); else console.error("!nextExerciseBtn");
685
+ if (deleteWorkoutBtn) deleteWorkoutBtn.addEventListener('click', deleteWorkout); else console.error("!deleteWorkoutBtn");
686
+ if (satisfactionRange) satisfactionRange.addEventListener('input', () => { if(satisfactionValue) satisfactionValue.textContent = `${satisfactionRange.value}%`; }); else console.error("!satisfactionRange");
687
+ console.log("initEventListeners: Fin attachement.");
688
+ }
689
+
690
+ // ==================================================
691
+ // --- FIN DES DÉFINITIONS DE FONCTIONS ---
692
+ // ==================================================
693
+
694
+ // --- INITIALISATION ---
695
+ document.addEventListener('DOMContentLoaded', () => {
696
+ console.log("DOM chargé. Initialisation...");
697
+ if (typeof firebase !== 'undefined' && firebase.auth) {
698
+ initAuthListener();
699
+ } else {
700
+ console.error("Firebase Auth non prêt ou non chargé ! Vérifiez les scripts Firebase.");
701
+ alert("Erreur critique : Impossible d'initialiser l'authentification.");
702
+ }
703
+ initEventListeners();
704
+ });
705
+
706
+ </script>
707
+ </body>
708
+ </html>
709
  <html>
710
  <head>
711
  <meta charset="utf-8" />