Switch web UI to dark English interface

src/patchdl_websrv.c

@@ -13,7 +13,7 @@ static const char status_json[] =
   "{"
   "\"firmware\":\"11.60\","
   "\"firmware_build\":\"0x11600000\","
-  "\"dns_guard\":\"Aktiv\","
+  "\"dns_guard\":\"Active\","
   "\"resolver\":\"Internal allowlist\","
   "\"free_space_mb\":64218,"
   "\"download_dir\":\"/mnt/usb0/patches\""

web/app.js

@@ -11,13 +11,13 @@ const SOURCE_TYPES = {
     label: "Official",
     className: "ok",
     installAllowed: true,
-    description: "Echte Installation",
+    description: "Native console installation",
   },
   external: {
     label: "External",
     className: "external",
     installAllowed: true,
-    description: "Echte externe Installation",
+    description: "Real external installation",
   },
   shadowmount: {
     label: "Shadowmount",
@@ -29,7 +29,7 @@ const SOURCE_TYPES = {
     label: "Unknown",
     className: "blocked",
     installAllowed: false,
-    description: "Blockiert",
+    description: "Blocked",
   },
 };
 
@@ -37,7 +37,7 @@ const fallback = {
   status: {
     firmware: "11.60",
     firmware_build: "0x11600000",
-    dns_guard: "Aktiv",
+    dns_guard: "Active",
     resolver: "Internal allowlist",
     free_space_mb: 64218,
     download_dir: "/mnt/usb0/patches",
@@ -132,7 +132,7 @@ const fallback = {
       name: "Demon's Souls",
       version: "01.004.000",
       progress: 64,
-      detail: "4.8 GB von 7.5 GB",
+      detail: "4.8 GB of 7.5 GB",
     },
   ],
   logs: [
@@ -204,7 +204,7 @@ function bindEvents() {
 
   els.refreshBtn.addEventListener("click", loadInitialData);
   els.saveBtn.addEventListener("click", saveConfig);
-  els.pauseAllBtn.addEventListener("click", () => showToast("Queue wurde pausiert."));
+  els.pauseAllBtn.addEventListener("click", () => showToast("Queue paused."));
 }
 
 async function loadInitialData() {
@@ -224,7 +224,7 @@ async function loadInitialData() {
   };
 
   render();
-  showToast(state.usingFallback ? "Demo-Daten geladen. API noch nicht erreichbar." : "Daten aktualisiert.");
+  showToast(state.usingFallback ? "Demo data loaded. API is not reachable yet." : "Data refreshed.");
 }
 
 async function getJson(url, fallbackValue) {
@@ -252,7 +252,7 @@ function renderStatus() {
   els.dnsValue.textContent = state.status.dns_guard || "--";
   els.resolverValue.textContent = state.status.resolver || "--";
   els.spaceValue.textContent = formatMb(state.status.free_space_mb);
-  els.downloadDirValue.textContent = state.status.download_dir || state.config.download_dir || "Download Ziel";
+  els.downloadDirValue.textContent = state.status.download_dir || state.config.download_dir || "Download target";
 }
 
 function renderSettings() {
@@ -276,7 +276,7 @@ function renderGames() {
   if (!visible.length) {
     const empty = document.createElement("div");
     empty.className = "empty-state";
-    empty.textContent = "Keine Titel fuer diesen Filter.";
+    empty.textContent = "No titles match this filter.";
     els.gameGrid.appendChild(empty);
     return;
   }
@@ -319,8 +319,8 @@ function createGameCard(game) {
       <div class="subline" style="margin-top:8px">
         ${statusPill(game)}
         ${sourcePill(game)}
-        ${installBlocked ? `<span class="pill blocked">Install gesperrt</span>` : `<span class="pill ok">Install erlaubt</span>`}
+        ${installBlocked ? `<span class="pill blocked">Install blocked</span>` : `<span class="pill ok">Install allowed</span>`}
-        <span class="pill">${game.enabled ? "Aktiv" : "Aus"}</span>
+        <span class="pill">${game.enabled ? "Enabled" : "Off"}</span>
       </div>
       <div class="source-path">${escapeHtml(sourceDetail(game))}</div>
     </div>
@@ -329,9 +329,9 @@ function createGameCard(game) {
   const versions = document.createElement("div");
   versions.className = "version-grid";
   versions.innerHTML = `
-    ${versionBox("Installiert", game.installed_version || "--")}
+    ${versionBox("Installed", game.installed_version || "--")}
-    ${versionBox("Kompatibel", game.compatible_version || "Keine")}
+    ${versionBox("Compatible", game.compatible_version || "None")}
-    ${versionBox("Neueste", `${game.latest_version || "--"} / FW ${game.latest_required_fw || "--"}`)}
+    ${versionBox("Latest", `${game.latest_version || "--"} / FW ${game.latest_required_fw || "--"}`)}
   `;
 
   const controls = document.createElement("div");
@@ -341,7 +341,7 @@ function createGameCard(game) {
   controlRow.className = "control-row";
 
   const mode = document.createElement("select");
-  mode.title = "Update-Modus";
+  mode.title = "Update mode";
   [
     ["disabled", "Disabled"],
     ["download_only", "Download only"],
@@ -358,7 +358,7 @@ function createGameCard(game) {
   mode.addEventListener("change", () => updateGame(game.title_id, { mode: mode.value, enabled: mode.value !== "disabled" }));
 
   const pin = document.createElement("input");
-  pin.title = "Maximale Content-Version";
+  pin.title = "Maximum content version";
   pin.placeholder = "max ver";
   pin.value = game.max_content_ver || "";
   pin.addEventListener("change", () => updateGame(game.title_id, { max_content_ver: pin.value.trim() }));
@@ -370,11 +370,11 @@ function createGameCard(game) {
   actions.innerHTML = `
     <button class="row-button" data-action="check">
       <svg><use href="#icon-refresh"></use></svg>
-      Pruefen
+      Check
     </button>
     <button class="row-button is-primary" data-action="download" ${!isDownloadAllowed(game) ? "disabled" : ""} title="${escapeHtml(downloadTitle(game))}">
       <svg><use href="#icon-download"></use></svg>
-      Laden
+      Download
     </button>
   `;
 
@@ -399,8 +399,8 @@ function versionBox(label, value) {
 function statusPill(game) {
   if (game.status === "blocked") return `<span class="pill blocked">${escapeHtml(blockedLabel(game))}</span>`;
   if (game.status === "queued") return `<span class="pill warn">In Queue</span>`;
-  if (game.status === "available") return `<span class="pill ok">Update verfuegbar</span>`;
+  if (game.status === "available") return `<span class="pill ok">Update available</span>`;
-  return `<span class="pill">Aktuell</span>`;
+  return `<span class="pill">Current</span>`;
 }
 
 function sourcePill(game) {
@@ -418,16 +418,16 @@ function sourceType(game) {
 
 function sourceDetail(game) {
   const src = sourceType(game);
-  if (src === "shadowmount") return `Mount: ${game.mount_from || "unbekannte Quelle"}`;
+  if (src === "shadowmount") return `Mount: ${game.mount_from || "unknown source"}`;
-  if (src === "external") return `External: ${game.source_path || "externe App-Metadaten"}`;
+  if (src === "external") return `External: ${game.source_path || "external app metadata"}`;
-  if (src === "official") return game.source_path || "Offizielle Installation";
+  if (src === "official") return game.source_path || "Official installation";
-  return "Quelle nicht eindeutig erkannt";
+  return "Source could not be identified";
 }
 
 function blockedLabel(game) {
-  if (sourceType(game) === "unknown") return "Quelle unbekannt";
+  if (sourceType(game) === "unknown") return "Unknown source";
-  if (!game.compatible_version) return "FW blockiert";
+  if (!game.compatible_version) return "FW blocked";
-  return "Blockiert";
+  return "Blocked";
 }
 
 function renderQueue() {
@@ -435,7 +435,7 @@ function renderQueue() {
   if (!state.downloads.length) {
     const empty = document.createElement("div");
     empty.className = "empty-state";
-    empty.textContent = "Keine aktiven Downloads.";
+    empty.textContent = "No active downloads.";
     els.queueList.appendChild(empty);
     return;
   }
@@ -463,8 +463,8 @@ function renderSourcePolicies() {
     row.className = "policy-row";
     row.innerHTML = `
       <span class="pill ${info.className}">${escapeHtml(info.label)}</span>
-      <strong>${policy.allow_install ? "Install erlaubt" : "Install gesperrt"}</strong>
+      <strong>${policy.allow_install ? "Install allowed" : "Install blocked"}</strong>
-      <em>${policy.allow_download ? "Download erlaubt" : "Download gesperrt"} - ${escapeHtml(info.description)}</em>
+      <em>${policy.allow_download ? "Download allowed" : "Download blocked"} - ${escapeHtml(info.description)}</em>
     `;
     return row;
   });
@@ -487,10 +487,10 @@ async function saveConfig() {
   try {
     await postJson(API.config, config);
     state.config = config;
-    showToast("Konfiguration gespeichert.");
+    showToast("Configuration saved.");
   } catch (error) {
     state.config = config;
-    showToast("Konfiguration lokal aktualisiert. API noch nicht erreichbar.");
+    showToast("Configuration updated locally. API is not reachable yet.");
   }
 
   renderSettings();
@@ -513,8 +513,8 @@ async function runTitleAction(titleId, action) {
 
   if (action === "download" && game.compatible_version) {
     const detail = isInstallBlocked(game)
-      ? "Download only - Install durch Source-Policy gesperrt"
+      ? "Download only - install blocked by source policy"
-      : "Wartet auf Start";
+      : "Waiting to start";
     game.queued = true;
     game.status = "queued";
     if (!state.downloads.some((item) => item.title_id === titleId)) {
@@ -527,10 +527,10 @@ async function runTitleAction(titleId, action) {
       });
     }
     state.logs.push(`[${timeNow()}] Queued ${game.title_id} ${game.compatible_version} (${sourceType(game)}, install=${isInstallBlocked(game) ? "blocked" : "allowed"})`);
-    showToast(`${game.title_id} wurde zur Queue hinzugefuegt.`);
+    showToast(`${game.title_id} was added to the queue.`);
   } else {
     state.logs.push(`[${timeNow()}] Check requested for ${game.title_id}`);
-    showToast(`${game.title_id} wird geprueft.`);
+    showToast(`${game.title_id} check queued.`);
   }
 
   renderGames();
@@ -544,7 +544,7 @@ function updateGame(titleId, patch) {
   if (sourceType(game) === "unknown" && patch.mode && !["disabled", "check_only"].includes(patch.mode)) {
     patch.mode = "check_only";
     patch.enabled = true;
-    showToast(`${titleId}: Quelle unbekannt, nur Check only erlaubt.`);
+    showToast(`${titleId}: unknown source, check only is allowed.`);
   }
   Object.assign(game, patch);
   if (patch.mode === "disabled") game.enabled = false;
@@ -573,11 +573,11 @@ function sourcePolicyForType(type) {
 }
 
 function downloadTitle(game) {
-  if (!game.enabled) return "Titel ist deaktiviert.";
+  if (!game.enabled) return "Title is disabled.";
-  if (!game.compatible_version) return "Keine kompatible Update-Version verfuegbar.";
+  if (!game.compatible_version) return "No compatible update version is available.";
-  if (!sourcePolicy(game).allow_download) return "Download ist fuer diese Quelle gesperrt.";
+  if (!sourcePolicy(game).allow_download) return "Downloads are blocked for this source.";
-  if (isInstallBlocked(game)) return "Download erlaubt, Installation bleibt fuer diese Quelle gesperrt.";
+  if (isInstallBlocked(game)) return "Download allowed; installs stay blocked for this source.";
-  return "Kompatibles Update laden.";
+  return "Download compatible update.";
 }
 
 async function postJson(url, body) {
@@ -620,7 +620,7 @@ function clone(value) {
 }
 
 function timeNow() {
-  return new Date().toLocaleTimeString("de-DE", { hour12: false });
+  return new Date().toLocaleTimeString("en-US", { hour12: false });
 }
 
 let toastTimer;

web/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="de">
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -60,7 +60,7 @@
         <nav class="nav-list">
           <a class="nav-link is-active" href="#games">
             <svg><use href="#icon-download"></use></svg>
-            Spiele
+            Games
           </a>
           <a class="nav-link" href="#downloads">
             <svg><use href="#icon-refresh"></use></svg>
@@ -81,15 +81,15 @@
         <header class="topbar">
           <div>
             <p class="eyebrow">Standalone ELF Web UI</p>
-            <h1>Spielupdates kontrolliert laden</h1>
+            <h1>Controlled game patch downloads</h1>
           </div>
           <div class="topbar-actions">
-            <button class="icon-button" id="refreshBtn" title="Status und Spiele neu pruefen">
+            <button class="icon-button" id="refreshBtn" title="Refresh status and games">
               <svg><use href="#icon-refresh"></use></svg>
             </button>
             <button class="primary-button" id="saveBtn">
               <svg><use href="#icon-save"></use></svg>
-              Speichern
+              Save
             </button>
           </div>
         </header>
@@ -103,32 +103,32 @@
           <article class="metric">
             <span>DNS Guard</span>
             <strong id="dnsValue">--</strong>
-            <em>Sony blockiert per nanoDNS</em>
+            <em>Sony blocked by nanoDNS</em>
           </article>
           <article class="metric">
-            <span>CDN Zugriff</span>
+            <span>CDN Access</span>
             <strong id="resolverValue">--</strong>
-            <em>Nur PatchDL Resolver</em>
+            <em>PatchDL resolver only</em>
           </article>
           <article class="metric">
-            <span>Speicher</span>
+            <span>Storage</span>
             <strong id="spaceValue">--</strong>
-            <em id="downloadDirValue">Download Ziel</em>
+            <em id="downloadDirValue">Download target</em>
           </article>
         </section>
 
         <section class="toolbar" id="games">
           <div class="search-box">
             <svg><use href="#icon-search"></use></svg>
-            <input id="searchInput" type="search" placeholder="Titel, Title ID oder Content ID suchen" />
+            <input id="searchInput" type="search" placeholder="Search title, Title ID, or Content ID" />
           </div>
 
           <div class="segmented" role="tablist" aria-label="Filter">
-            <button class="is-selected" data-filter="all">Alle</button>
+            <button class="is-selected" data-filter="all">All</button>
-            <button data-filter="enabled">Aktiv</button>
+            <button data-filter="enabled">Enabled</button>
             <button data-filter="available">Updates</button>
             <button data-filter="shadowmount">Shadow</button>
-            <button data-filter="blocked">Blockiert</button>
+            <button data-filter="blocked">Blocked</button>
             <button data-filter="queued">Queue</button>
           </div>
         </section>
@@ -140,7 +140,7 @@
             <div class="panel-heading">
               <div>
                 <p class="eyebrow">Downloads</p>
-                <h2>Aktive Queue</h2>
+                <h2>Active Queue</h2>
               </div>
               <button class="ghost-button" id="pauseAllBtn">
                 <svg><use href="#icon-pause"></use></svg>
@@ -154,7 +154,7 @@
             <div class="panel-heading">
               <div>
                 <p class="eyebrow">Policy</p>
-                <h2>Update Regeln</h2>
+                <h2>Update Rules</h2>
               </div>
             </div>
 
@@ -167,32 +167,32 @@
                 </select>
               </label>
               <label class="field">
-                <span>Download Ordner</span>
+                <span>Download Folder</span>
                 <input id="downloadDir" type="text" spellcheck="false" />
               </label>
               <label class="switch-row">
                 <input id="installAfterDownload" type="checkbox" />
                 <span>
-                  <strong>Nach Download installieren</strong>
+                  <strong>Install after download</strong>
-                  <em>Globaler Default, pro Spiel ueberschreibbar</em>
+                  <em>Global default, overridable per game</em>
                 </span>
               </label>
               <label class="switch-row">
                 <input id="deleteAfterInstall" type="checkbox" />
                 <span>
-                  <strong>PKG nach Installation loeschen</strong>
+                  <strong>Delete PKG after install</strong>
-                  <em>Nur wenn Installation erfolgreich war</em>
+                  <em>Only after a successful install</em>
                 </span>
               </label>
             </div>
 
             <div class="allowlist">
-              <span>Interne CDN Allowlist</span>
+              <span>Internal CDN Allowlist</span>
               <div id="allowlistHosts"></div>
             </div>
 
             <div class="source-policy">
-              <span>Install Schutz</span>
+              <span>Install Protection</span>
               <div id="sourcePolicyList"></div>
             </div>
           </div>
@@ -202,7 +202,7 @@
           <div class="panel-heading">
             <div>
               <p class="eyebrow">Runtime</p>
-              <h2>Letzte Ereignisse</h2>
+              <h2>Recent Events</h2>
             </div>
           </div>
           <pre id="logOutput" tabindex="0"></pre>

web/styles.css

@@ -1,21 +1,21 @@
 :root {
-  color-scheme: light;
+  color-scheme: dark;
-  --bg: #f6f7f4;
+  --bg: #0b0d10;
-  --surface: #ffffff;
+  --surface: #14181d;
-  --surface-2: #eeefe9;
+  --surface-2: #1b2027;
-  --ink: #1f2420;
+  --ink: #edf2f7;
-  --muted: #697069;
+  --muted: #9aa6b2;
-  --border: #d7dbd2;
+  --border: #2a313a;
-  --green: #247857;
+  --green: #38c172;
-  --green-dark: #155f42;
+  --green-dark: #63d994;
-  --green-soft: #dff3e9;
+  --green-soft: rgba(56, 193, 114, 0.16);
-  --amber: #b87516;
+  --amber: #f2b84b;
-  --amber-soft: #fff1d6;
+  --amber-soft: rgba(242, 184, 75, 0.16);
-  --red: #b54343;
+  --red: #ff6b6b;
-  --red-soft: #ffe4e4;
+  --red-soft: rgba(255, 107, 107, 0.15);
-  --blue: #2d6d9d;
+  --blue: #58a6ff;
-  --blue-soft: #deeff8;
+  --blue-soft: rgba(88, 166, 255, 0.15);
-  --shadow: 0 18px 50px rgba(31, 36, 32, 0.1);
+  --shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
   --radius: 8px;
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
@@ -69,9 +69,9 @@ svg {
   top: 0;
   height: 100vh;
   padding: 20px 16px;
-  background: #1e241f;
+  background: #0f1216;
-  color: #f7f8f4;
+  color: var(--ink);
-  border-right: 1px solid #111611;
+  border-right: 1px solid #222932;
 }
 
 .brand {
@@ -87,8 +87,8 @@ svg {
   place-items: center;
   width: 42px;
   height: 42px;
-  border: 1px solid rgba(255, 255, 255, 0.18);
+  border: 1px solid rgba(255, 255, 255, 0.16);
-  background: #2b6f50;
+  background: #247857;
   border-radius: 8px;
   font-weight: 800;
 }
@@ -101,7 +101,7 @@ svg {
 .brand span {
   display: block;
   margin-top: 2px;
-  color: #b8c2ba;
+  color: var(--muted);
   font-size: 12px;
 }
 
@@ -116,14 +116,14 @@ svg {
   gap: 10px;
   min-height: 40px;
   padding: 0 10px;
-  color: #cbd3cc;
+  color: #b6c0ca;
   text-decoration: none;
   border-radius: 8px;
 }
 
 .nav-link:hover,
 .nav-link.is-active {
-  background: rgba(255, 255, 255, 0.09);
+  background: rgba(255, 255, 255, 0.08);
   color: #ffffff;
 }
 
@@ -230,7 +230,7 @@ h2 {
   border: 1px solid var(--border);
   background: var(--surface);
   border-radius: var(--radius);
-  box-shadow: 0 1px 0 rgba(31, 36, 32, 0.04);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
 }
 
 .metric span,
@@ -298,7 +298,7 @@ h2 {
 .segmented button.is-selected {
   background: var(--surface);
   color: var(--ink);
-  box-shadow: 0 1px 2px rgba(31, 36, 32, 0.08);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
 }
 
 .game-grid {
@@ -315,7 +315,7 @@ h2 {
   border: 1px solid var(--border);
   background: var(--surface);
   border-radius: var(--radius);
-  box-shadow: 0 1px 0 rgba(31, 36, 32, 0.04);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
 }
 
 .game-title {
@@ -366,31 +366,31 @@ h2 {
 }
 
 .pill.ok {
-  border-color: #b7dec9;
+  border-color: rgba(56, 193, 114, 0.34);
   background: var(--green-soft);
   color: var(--green-dark);
 }
 
 .pill.warn {
-  border-color: #f0cd91;
+  border-color: rgba(242, 184, 75, 0.38);
   background: var(--amber-soft);
-  color: #81500b;
+  color: var(--amber);
 }
 
 .pill.external {
-  border-color: #b7d8e8;
+  border-color: rgba(88, 166, 255, 0.34);
   background: var(--blue-soft);
-  color: #1e547a;
+  color: var(--blue);
 }
 
 .pill.shadow {
-  border-color: #d0c4eb;
+  border-color: rgba(181, 146, 255, 0.34);
-  background: #eee8fb;
+  background: rgba(181, 146, 255, 0.14);
-  color: #584080;
+  color: #c7b1ff;
 }
 
 .pill.blocked {
-  border-color: #f0b8b8;
+  border-color: rgba(255, 107, 107, 0.34);
   background: var(--red-soft);
   color: var(--red);
 }
@@ -414,7 +414,7 @@ h2 {
 .version-box {
   min-width: 0;
   padding: 10px;
-  background: #f8f9f6;
+  background: var(--surface-2);
   border: 1px solid var(--border);
   border-radius: 8px;
 }
@@ -497,7 +497,7 @@ h2 {
   gap: 12px;
   align-items: center;
   padding: 12px;
-  background: #f8f9f6;
+  background: var(--surface-2);
   border: 1px solid var(--border);
   border-radius: 8px;
 }
@@ -521,7 +521,7 @@ h2 {
   height: 8px;
   margin-top: 10px;
   overflow: hidden;
-  background: #e3e6de;
+  background: #242b33;
   border-radius: 999px;
 }
 
@@ -555,7 +555,7 @@ h2 {
   min-height: 38px;
   padding: 0 10px;
   border: 1px solid var(--border);
-  background: #f8f9f6;
+  background: var(--surface-2);
   color: var(--ink);
   border-radius: 8px;
 }
@@ -566,7 +566,7 @@ h2 {
   gap: 10px;
   padding: 10px;
   border: 1px solid var(--border);
-  background: #f8f9f6;
+  background: var(--surface-2);
   border-radius: 8px;
 }
 
@@ -622,7 +622,7 @@ h2 {
   gap: 8px;
   align-items: center;
   padding: 8px;
-  background: #f8f9f6;
+  background: var(--surface-2);
   border: 1px solid var(--border);
   border-radius: 8px;
 }
@@ -646,7 +646,7 @@ h2 {
   min-height: 26px;
   padding: 0 8px;
   background: var(--blue-soft);
-  color: #1e547a;
+  color: var(--blue);
   border-radius: 999px;
   font-size: 12px;
   font-weight: 800;
@@ -662,8 +662,8 @@ pre {
   margin: 0;
   padding: 12px;
   overflow: auto;
-  background: #1f2420;
+  background: #0f1216;
-  color: #e9eee8;
+  color: #dfe7ef;
   border-radius: 8px;
   font-size: 12px;
   line-height: 1.55;
@@ -685,8 +685,9 @@ pre {
   z-index: 10;
   max-width: min(420px, calc(100vw - 36px));
   padding: 12px 14px;
-  color: #ffffff;
+  color: var(--ink);
-  background: #1f2420;
+  background: #171c22;
+  border: 1px solid var(--border);
   border-radius: 8px;
   box-shadow: var(--shadow);
   opacity: 0;