From be5ff378df9d8eb39cb3e36f9aeef3394a154187 Mon Sep 17 00:00:00 2001
From: Julian <julian3@mailbox.org>
Date: Tue, 12 Aug 2025 23:43:12 +0200
Subject: [PATCH] Translate web interface to English

---
 templates/index.html | 62 ++++++++++++++++++++++----------------------
 1 file changed, 31 insertions(+), 31 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index 051670f..2c99c8a 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,5 +1,5 @@
-<!doctype html><html lang=de>
-<head><meta charset=utf-8><title>Internet-Verbindungsmonitor</title>
+<!doctype html><html lang=en>
+<head><meta charset=utf-8><title>Internet Connection Monitor</title>
 <script src='https://cdn.jsdelivr.net/npm/chart.js'></script>
 <script src='https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3'></script>
 <style>
@@ -13,43 +13,43 @@
 </style></head>
 
 <body>
-  <h1>Internet-Verbindungsmonitor</h1>
-  <p id=status>Starte …</p>
+  <h1>Internet Connection Monitor</h1>
+  <p id=status>Starting…</p>
   
   <div class="legend">
-    <strong>Verfügbarkeitsstufen:</strong><br>
-    <div class="legend-item"><span class="legend-color" style="background:#4ade80"></span>Exzellent (≥99,9%)</div>
-    <div class="legend-item"><span class="legend-color" style="background:#eab308"></span>Gut (98,0-99,8%)</div>
-    <div class="legend-item"><span class="legend-color" style="background:#ef4444"></span>Problematisch (<98%)</div>
-    <div class="legend-item"><span class="legend-color" style="background:#3b82f6"></span>Keine Daten</div>
+    <strong>Availability Levels:</strong><br>
+    <div class="legend-item"><span class="legend-color" style="background:#4ade80"></span>Excellent (≥99.9%)</div>
+    <div class="legend-item"><span class="legend-color" style="background:#eab308"></span>Good (98.0-99.8%)</div>
+    <div class="legend-item"><span class="legend-color" style="background:#ef4444"></span>Problematic (<98%)</div>
+    <div class="legend-item"><span class="legend-color" style="background:#3b82f6"></span>No Data</div>
   </div>
   
   <div class="chart-container">
-    <div class="chart-title">Detaillierter Verlauf</div>
+    <div class="chart-title">Detailed Timeline</div>
     <canvas id=c height=80></canvas>
   </div>
   
   <div class="chart-container">
-    <div class="chart-title">24-Stunden-Übersicht (letzte 24h)</div>
+    <div class="chart-title">24-Hour Overview (last 24h)</div>
     <canvas id=hourlyChart height=60></canvas>
   </div>
   
   <div class="chart-container">
-    <div class="chart-title">Tagesübersicht (letzte 30 Tage)</div>
+    <div class="chart-title">Daily Overview (last 30 days)</div>
     <canvas id=dailyChart height=60></canvas>
   </div>
 
 <script>
 let chart=null, hourlyChart=null, dailyChart=null;
 
-// Hilfsfunktion: UTC-Timestamp zu lokaler Zeit konvertieren
+// Helper: convert UTC timestamp to local time
 function utcToLocal(utcTimestamp) {
   return new Date(utcTimestamp * 1000);
 }
 
-// Hilfsfunktion: UTC-Stunde zu lokaler Stunde umrechnen und formatieren
+// Helper: format UTC hour into local hour string
 function formatHourLabel(utcHour) {
-  // UTC-Stunde in lokale Stunde umrechnen
+  // Convert UTC hour to local hour
   const now = new Date();
   const utcTime = new Date(now.getTime() + (now.getTimezoneOffset() * 60000));
   utcTime.setUTCHours(utcHour, 0, 0, 0);
@@ -57,30 +57,30 @@ <h1>Internet-Verbindungsmonitor</h1>
   return localHour.toString().padStart(2, '0') + ':00';
 }
 
-// Hilfsfunktion: UTC-Timestamp zu lokalem Tages-Label  
+// Helper: format UTC timestamp into local day label
 function formatDayLabel(utcTimestamp) {
   const localDate = utcToLocal(utcTimestamp);
-  return localDate.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' });
+  return localDate.toLocaleDateString('en-US', { day: '2-digit', month: '2-digit' });
 }
 
 async function reloadData(){
   const r = await fetch('/data');
   const {labels,values,hourly,daily} = await r.json();
 
-  // Status-Text setzen
+  // Set status text
   const statusTxt = values.length
-        ? (values.at(-1) ? '🟢 Verbindung steht' : '🔴 Keine Verbindung')
-        : 'Noch keine Daten';
+        ? (values.at(-1) ? '🟢 Connection up' : '🔴 No connection')
+        : 'No data yet';
   document.getElementById('status').textContent = statusTxt;
 
-  // Detaillierter Verlauf - UTC-Timestamps zu lokalen Zeiten konvertieren
+  // Detailed timeline - convert UTC timestamps to local times
   const localLabels = labels.map(utcTimestamp => utcToLocal(utcTimestamp).toISOString());
   
   if(!chart){
     chart = new Chart(document.getElementById('c'),{
       type:'line',
       data:{labels:localLabels,
-            datasets:[{label:'Online-Status',data:values,stepped:true,fill:true}]},
+            datasets:[{label:'Online Status',data:values,stepped:true,fill:true}]},
       options:{scales:{
         y:{min:0,max:1,ticks:{stepSize:1,callback:v=>v?'Online':'Offline'}},
         x:{type:'time',time:{unit:'hour'}}
@@ -92,7 +92,7 @@ <h1>Internet-Verbindungsmonitor</h1>
     chart.update();
   }
   
-  // 24-Stunden-Chart - UTC zu lokaler Zeit konvertieren
+  // 24-hour chart - convert UTC to local time
   if(hourly && hourly.length){
     if(!hourlyChart){
       hourlyChart = new Chart(document.getElementById('hourlyChart'),{
@@ -100,7 +100,7 @@ <h1>Internet-Verbindungsmonitor</h1>
         data:{
           labels:hourly.map(h=>h.uptime<0 ? formatHourLabel(h.hour)+' ?' : formatHourLabel(h.hour)),
           datasets:[{
-            label:'Stündlicher Status',
+            label:'Hourly Status',
             data:hourly.map(h=>h.uptime<0?0.5:h.uptime),
             backgroundColor:hourly.map(h=>h.uptime<0?'#3b82f6':(h.uptime>=0.999?'#4ade80':(h.uptime>=0.98?'#eab308':'#ef4444'))),
             borderWidth:0
@@ -110,14 +110,14 @@ <h1>Internet-Verbindungsmonitor</h1>
           responsive:true,
           scales:{
             y:{min:0,max:1,ticks:{stepSize:0.2,callback:v=>(v*100).toFixed(0)+'%'}},
-            x:{title:{display:true,text:'Stunde (Ortszeit)'}}
+            x:{title:{display:true,text:'Hour (local time)'}}
           },
           plugins:{
             tooltip:{
               callbacks:{
                 label:ctx=>{
                   const hourData = hourly[ctx.dataIndex];
-                  return hourData.uptime<0 ? 'Keine Daten verfügbar' : `Verfügbarkeit: ${(ctx.parsed.y*100).toFixed(1)}%`;
+                  return hourData.uptime<0 ? 'No data available' : `Availability: ${(ctx.parsed.y*100).toFixed(1)}%`;
                 }
               }
             }
@@ -132,7 +132,7 @@ <h1>Internet-Verbindungsmonitor</h1>
     }
   }
   
-  // Tages-Chart - UTC zu lokaler Zeit konvertieren
+  // Daily chart - convert UTC to local time
   if(daily && daily.length){
     if(!dailyChart){
       dailyChart = new Chart(document.getElementById('dailyChart'),{
@@ -140,7 +140,7 @@ <h1>Internet-Verbindungsmonitor</h1>
         data:{
           labels:daily.map(d=>d.uptime<0 ? formatDayLabel(d.date)+' ?' : formatDayLabel(d.date)),
           datasets:[{
-            label:'Täglicher Status',
+            label:'Daily Status',
             data:daily.map(d=>d.uptime<0?0.5:d.uptime),
             backgroundColor:daily.map(d=>d.uptime<0?'#3b82f6':(d.uptime>=0.999?'#4ade80':(d.uptime>=0.98?'#eab308':'#ef4444'))),
             borderWidth:0
@@ -150,14 +150,14 @@ <h1>Internet-Verbindungsmonitor</h1>
           responsive:true,
           scales:{
             y:{min:0,max:1,ticks:{stepSize:0.2,callback:v=>(v*100).toFixed(0)+'%'}},
-            x:{title:{display:true,text:'Tag (Ortszeit)'}}
+            x:{title:{display:true,text:'Day (local time)'}}
           },
           plugins:{
             tooltip:{
               callbacks:{
                 label:ctx=>{
                   const dayData = daily[ctx.dataIndex];
-                  return dayData.uptime<0 ? 'Keine Daten verfügbar' : `Verfügbarkeit: ${(ctx.parsed.y*100).toFixed(1)}%`;
+                  return dayData.uptime<0 ? 'No data available' : `Availability: ${(ctx.parsed.y*100).toFixed(1)}%`;
                 }
               }
             }
@@ -174,5 +174,5 @@ <h1>Internet-Verbindungsmonitor</h1>
 }
 
 reloadData();
-setInterval(reloadData, 60000);   // jede Minute
+setInterval(reloadData, 60000);   // every minute
 </script></body></html>
