fix sorting, add things

public/checklist.html

@@ -53,9 +53,9 @@
 <!-- Black banner with buttons and user info -->
 <nav class="navbar navbar-expand-lg navbar-custom">
   <div class="container">
-    <a class="navbar-brand">
+    <a class="navbar-brand" style="margin-left: -7px;">
-      <img src="img/logo_w.png" style="max-width: 180px; height: 70px; object-fit: contain;">
+      <img src="img/logo_w.png" style="max-width: 220px; height: 70px; object-fit: contain;">    
-    </a>
+      </a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
@@ -76,7 +76,8 @@
 <div class="container mt-5">
   <h2>Checklist</h2>
   <div id="watched-ratio" class="ratio"></div>
-  <h3 class="fs-6">Temps avant les Oscars (2 mars 2025) - <span id="time-left"></span></h3>
+  <h3 class="fs-6" style="margin-bottom: -1px;">Temps avant les Oscars (2 mars 2025) - <span id="time-left"></span></h3>
+  <h3 class="fs-6"><span id="movies-per-day"></span></h3>
   <div class="progress my-3">
     <div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%; background-color: red;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
@@ -137,6 +138,10 @@
     }
 
     const movies = await res.json();
+
+    // Sort movies alphabetically by title
+    movies.sort((a, b) => a.title.localeCompare(b.title, 'fr', { sensitivity: 'base' }));
+
     const watchedRes = await fetch('/api/movies/watchedMovies', {
       method: 'GET',
       headers: { 'Authorization': `Bearer ${token}` }
@@ -223,6 +228,10 @@
       });
     });
 
+    const moviesLeft = totalMoviesCount - watchedMoviesCount;
+    const moviesPerDay = daysLeft > 0 ? (moviesLeft / daysLeft).toFixed(2) : moviesLeft;
+    document.getElementById('movies-per-day').textContent = `À voir par jour: ${moviesPerDay} films`;
+
     document.getElementById('log-off').addEventListener('click', () => {
       localStorage.removeItem('auth_token');
       window.location.href = '/';

public/movies.html

@@ -68,8 +68,8 @@
 <!-- Black banner with buttons and user info -->
 <nav class="navbar navbar-expand-lg navbar-custom">
   <div class="container">
-    <a class="navbar-brand">
+    <a class="navbar-brand" style="margin-left: -7px;">
-      <img src="img/logo_w.png" style="max-width: 180px; height: 70px; object-fit: contain;">
+    <img src="img/logo_w.png" style="max-width: 220px; height: 70px; object-fit: contain;">    
     </a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -154,6 +154,9 @@
 
     const movies = await res.json();
 
+    // Sort movies alphabetically by title
+    movies.sort((a, b) => a.title.localeCompare(b.title, 'fr', { sensitivity: 'base' }));
+
     const watchedRes = await fetch('/api/movies/watchedMovies', {
       method: 'GET',
       headers: { 'Authorization': `Bearer ${token}` },

public/user-stat.html

@@ -37,9 +37,9 @@
 <!-- Black banner with buttons and user info -->
 <nav class="navbar navbar-expand-lg navbar-custom">
   <div class="container">
-    <a class="navbar-brand">
+    <a class="navbar-brand" style="margin-left: -7px;">
-      <img src="img/logo_w.png" style="max-width: 180px; height: 70px; object-fit: contain;">
+      <img src="img/logo_w.png" style="max-width: 220px; height: 70px; object-fit: contain;">    
-    </a>
+      </a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
@@ -70,7 +70,7 @@
     <thead>
       <tr>
         <th scope="col">Nom</th>
-        <th scope="col">Total des films regardés</th>
+        <th scope="col">Total des films regardés (pts)</th>
         <th scope="col">Ratio</th>
       </tr>
     </thead>