add version in index.html

public/index.html

@@ -5,13 +5,34 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Pool Oscars 2025</title>
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+  <style>
+    /* Ensure the body takes the full height */
+    html, body {
+      height: 100%;
+    }
+
+    /* Flexbox layout to make the content take available space */
+    .container {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      min-height: 100vh;
+    }
+
+    footer {
+      margin-top: auto;
+      padding: 10px;
+      background-color: #f8f9fa;
+      text-align: center;
+    }
+  </style>
 </head>
 <body class="bg-light">
 
-<div class="container d-flex justify-content-center align-items-center vh-100">
-  <div class="card p-4" style="max-width: 400px;">
+<div class="container">
+  <div class="card p-4" style="max-width: 400px; margin: auto;">
     <div class="text-center mb-4">
-      <img src="img/logo.png" style="width: 80%";>
+      <img src="img/logo.png" style="width: 80%;">
     </div>
     <form id="login-form">
       <div class="mb-3">
@@ -26,6 +47,11 @@
     </form>
     <p class="mt-3 text-center">Pas de compte? <a href="/register.html">Enregistrez-vous</a></p>
   </div>
+
+  <!-- Footer Section -->
+  <footer>
+    <p id="footer-text">Loading version information...</p>
+  </footer>
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
@@ -59,7 +85,23 @@
       alert(`Login failed: ${error.message}`);
     }
   });
+
+  // Fetch version information from the API
+  async function fetchVersionInfo() {
+    const res = await fetch('/api/users/version');
+    if (res.ok) {
+      const data = await res.json();
+      // Update footer with the fetched version info
+      const footerText = `${data.author} - version: ${data.version} - ${data.message}`;
+      document.getElementById('footer-text').textContent = footerText;
+    } else {
+      document.getElementById('footer-text').textContent = 'Failed to load version info';
+    }
+  }
+
+  // Call the function to fetch and display the version info
+  fetchVersionInfo();
 </script>
 
 </body>
-</html>
+</html>