feat: Comments translation to EN

frontend/index.html

@@ -6,13 +6,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>KétaPK - Simulation Pharmacocinétique</title>
 
-  <!-- CSS Tailwind compilé -->
+  <!-- Compiled Tailwind CSS -->
   <link rel="stylesheet" href="css/tailwind.css">
 
-  <!-- CSS Personnalisé -->
+  <!-- Custom CSS -->
   <link rel="stylesheet" href="css/styles.css">
 
-  <!-- Librairies JS Statiques -->
+  <!-- Static JS Libraries -->
   <script src="vendor/chart.umd.min.js"></script>
   <script src="vendor/chartjs-plugin-annotation.min.js"></script>
 </head>
@@ -95,18 +95,18 @@
     <!-- SIDEBAR -->
     <aside class="lg:col-span-3 xl:col-span-2 space-y-5">
 
-      <!-- Panneau Patient -->
+      <!-- Patient Panel -->
       <div class="bg-[var(--kt-surface-2)] p-4 rounded-xl border border-[var(--kt-border)] shadow-md mb-6">
         <div class="grid grid-cols-1 gap-4 items-center">
 
-          <!-- Nom du Patient -->
+          <!-- Patient Name -->
           <div>
             <label data-i18n="patient.name_label" class="block text-xs text-[var(--kt-text-3)] mb-1 font-medium">Nom du patient</label>
             <input type="text" id="patientName" data-i18n-placeholder="patient.name_placeholder" placeholder="ex: DUPONT Jean"
               class="w-full bg-[var(--kt-bg)] border border-[var(--kt-border)] rounded-lg px-3 py-2 text-[var(--kt-text-1)] font-bold focus:border-cyan-500 focus:outline-none">
           </div>
 
-          <!-- Poids + Avertissement -->
+          <!-- Weight + Warning -->
           <div>
             <label data-i18n="patient.weight_label" class="block text-xs text-[var(--kt-text-3)] mb-1 font-medium">Poids du patient (kg)</label>
             <input type="number" id="patientWeight" value="70" min="10" max="250" step="any"
@@ -118,7 +118,7 @@
             </div>
           </div>
 
-          <!-- Choix Unité Perfusion -->
+          <!-- Infusion Unit Choice -->
           <div>
             <label data-i18n="patient.infusion_unit_label" class="block text-xs text-[var(--kt-text-3)] mb-1 font-medium">Unité de perfusion continue</label>
             <select id="infusionUnitSelect"
@@ -129,7 +129,7 @@
             </select>
           </div>
 
-          <!-- Résolution temporelle de la timeline -->
+          <!-- Timeline time resolution -->
           <div>
             <label data-i18n="patient.timeline_resolution_label" class="block text-xs text-[var(--kt-text-3)] mb-1 font-medium">Résolution de la timeline</label>
             <div class="grid grid-cols-2 gap-2">
@@ -150,7 +150,7 @@
         </div>
       </div>
 
-      <!-- Bouton d'exportation CSV Lateral -->
+      <!-- Lateral CSV export button -->
       <div class="flex justify-end gap-3 mb-4">
         <button id="btnExportCSV" data-i18n="buttons.export_csv"
           class="bg-[var(--kt-btn-bg)] hover:bg-[var(--kt-btn-bg-hover)] text-[var(--kt-text-1)] text-xs font-semibold px-3 py-2 rounded-lg flex items-center gap-2 transition w-full justify-center">
@@ -191,7 +191,7 @@
     <!-- CONTENT -->
     <section class="lg:col-span-9 xl:col-span-10 space-y-5 flex flex-col">
 
-      <!-- Graphique dynamique -->
+      <!-- Dynamic chart -->
       <div
         class="bg-[var(--kt-surface-2)] border border-[var(--kt-border)] rounded-2xl p-4 shadow-md backdrop-blur-sm flex flex-col h-[calc(100vh-370px)] min-h-[450px] relative">
         <div class="flex-1 w-full h-full relative">
@@ -211,11 +211,11 @@
 
         <div id="timelineGrid"
           class="flex gap-2 overflow-x-auto pb-2 scrollbar-thin scrollbar-thumb-[var(--kt-scroll-thumb)] scrollbar-track-[var(--kt-scroll-track)]">
-          <!-- Injecté via app.js -->
+          <!-- Injected via app.js -->
         </div>
       </div>
 
-      <!-- Tableau de contrôle des concentrations (0-300 min) -->
+      <!-- Concentration control table (0-300 min) -->
       <details class="bg-[var(--kt-surface-2)] border border-[var(--kt-border)] rounded-xl mb-6">
         <summary
           class="p-4 cursor-pointer text-[var(--kt-text-2)] font-semibold text-sm hover:text-[var(--kt-text-1)] flex justify-between items-center">
@@ -235,7 +235,7 @@
               </tr>
             </thead>
             <tbody id="dataTableBody" class="divide-y divide-[var(--kt-border-soft)] font-mono">
-              <!-- Généré dynamiquement en JS -->
+              <!-- Dynamically generated in JS -->
             </tbody>
           </table>
         </div>