From a15a9f2df0b94f34b0e1b4234fe56362eb015fd9 Mon Sep 17 00:00:00 2001
From: zwitschi <zwitschi82@gmail.com>
Date: Thu, 13 Aug 2026 18:40:03 +0200
Subject: [PATCH] refactor(frontend): standardize HTML formatting and update
 font families

---
 frontend/admin/index.html       | 179 ++++++++++----------------------
 frontend/admin/login/index.html | 111 ++++++++++----------
 frontend/index.html             |   3 +
 frontend/src/style.css          |   7 +-
 4 files changed, 121 insertions(+), 179 deletions(-)

diff --git a/frontend/admin/index.html b/frontend/admin/index.html
index 4c10e45..762745c 100644
--- a/frontend/admin/index.html
+++ b/frontend/admin/index.html
@@ -1,130 +1,63 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Linear Void Admin</title>
-    <link rel="stylesheet" href="../src/style.css" />
-  </head>
 
-  <body class="admin-body">
-    <div class="admin-shell">
-      <aside class="admin-sidebar" aria-label="Primary">
-        <div class="brand-block">
-          <div class="brand-badge" aria-hidden="true">LV</div>
-          <div class="brand-text">Admin</div>
-        </div>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Linear Void Admin</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Doto:wght@100..900&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Space+Grotesk:wght@300..700&family=Tektur:wght@400..900&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="../src/style.css" />
+</head>
 
-        <button id="logout-btn" type="button" class="btn btn-secondary btn-block">Sign out</button>
+<body class="admin-body">
+  <div class="admin-shell">
+    <aside class="admin-sidebar" aria-label="Primary">
+      <div class="brand-block">
+        <div class="brand-badge" aria-hidden="true">LV</div>
+        <div class="brand-text">Admin</div>
+      </div>
 
-        <nav class="admin-nav" aria-label="Admin sections" role="tablist" aria-orientation="vertical">
-          <button
-            type="button"
-            id="tab-trigger-dashboard"
-            role="tab"
-            class="tab-trigger is-active"
-            data-tab="dashboard"
-            aria-controls="tab-dashboard"
-            aria-selected="true"
-          >
-            Dashboard
-          </button>
-          <button
-            type="button"
-            id="tab-trigger-upload"
-            role="tab"
-            class="tab-trigger"
-            data-tab="upload"
-            aria-controls="tab-upload"
-            aria-selected="false"
-          >
-            Upload Video
-          </button>
-          <button
-            type="button"
-            id="tab-trigger-playlist"
-            role="tab"
-            class="tab-trigger"
-            data-tab="playlist"
-            aria-controls="tab-playlist"
-            aria-selected="false"
-          >
-            Playlist
-          </button>
-          <button
-            type="button"
-            id="tab-trigger-schedule"
-            role="tab"
-            class="tab-trigger"
-            data-tab="schedule"
-            aria-controls="tab-schedule"
-            aria-selected="false"
-          >
-            Schedule
-          </button>
-          <button
-            type="button"
-            id="tab-trigger-moderation"
-            role="tab"
-            class="tab-trigger"
-            data-tab="moderation"
-            aria-controls="tab-moderation"
-            aria-selected="false"
-          >
-            Moderation
-          </button>
-          <button
-            type="button"
-            id="tab-trigger-chat-log"
-            role="tab"
-            class="tab-trigger"
-            data-tab="chat-log"
-            aria-controls="tab-chat-log"
-            aria-selected="false"
-          >
-            Chat Log
-          </button>
-          <button
-            type="button"
-            id="tab-trigger-users"
-            role="tab"
-            class="tab-trigger"
-            data-tab="users"
-            aria-controls="tab-users"
-            aria-selected="false"
-          >
-            Users
-          </button>
-          <button
-            type="button"
-            id="tab-trigger-analytics"
-            role="tab"
-            class="tab-trigger"
-            data-tab="analytics"
-            aria-controls="tab-analytics"
-            aria-selected="false"
-          >
-            Analytics
-          </button>
-          <button
-            type="button"
-            id="tab-trigger-system"
-            role="tab"
-            class="tab-trigger"
-            data-tab="system"
-            aria-controls="tab-system"
-            aria-selected="false"
-          >
-            System
-          </button>
-        </nav>
-      </aside>
+      <button id="logout-btn" type="button" class="btn btn-secondary btn-block">Sign out</button>
 
-      <main class="admin-main" id="admin-main" tabindex="-1">
-        <div id="tab-content-container" aria-live="polite">Loading...</div>
-      </main>
-    </div>
+      <nav class="admin-nav" aria-label="Admin sections" role="tablist" aria-orientation="vertical">
+        <button type="button" id="tab-trigger-dashboard" role="tab" class="tab-trigger is-active" data-tab="dashboard" aria-controls="tab-dashboard" aria-selected="true">
+          Dashboard
+        </button>
+        <button type="button" id="tab-trigger-upload" role="tab" class="tab-trigger" data-tab="upload" aria-controls="tab-upload" aria-selected="false">
+          Upload Video
+        </button>
+        <button type="button" id="tab-trigger-playlist" role="tab" class="tab-trigger" data-tab="playlist" aria-controls="tab-playlist" aria-selected="false">
+          Playlist
+        </button>
+        <button type="button" id="tab-trigger-schedule" role="tab" class="tab-trigger" data-tab="schedule" aria-controls="tab-schedule" aria-selected="false">
+          Schedule
+        </button>
+        <button type="button" id="tab-trigger-moderation" role="tab" class="tab-trigger" data-tab="moderation" aria-controls="tab-moderation" aria-selected="false">
+          Moderation
+        </button>
+        <button type="button" id="tab-trigger-chat-log" role="tab" class="tab-trigger" data-tab="chat-log" aria-controls="tab-chat-log" aria-selected="false">
+          Chat Log
+        </button>
+        <button type="button" id="tab-trigger-users" role="tab" class="tab-trigger" data-tab="users" aria-controls="tab-users" aria-selected="false">
+          Users
+        </button>
+        <button type="button" id="tab-trigger-analytics" role="tab" class="tab-trigger" data-tab="analytics" aria-controls="tab-analytics" aria-selected="false">
+          Analytics
+        </button>
+        <button type="button" id="tab-trigger-system" role="tab" class="tab-trigger" data-tab="system" aria-controls="tab-system" aria-selected="false">
+          System
+        </button>
+      </nav>
+    </aside>
 
-    <script type="module" src="/src/admin.ts"></script>
-  </body>
-</html>
+    <main class="admin-main" id="admin-main" tabindex="-1">
+      <div id="tab-content-container" aria-live="polite">Loading...</div>
+    </main>
+  </div>
+
+  <script type="module" src="/src/admin.ts"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/frontend/admin/login/index.html b/frontend/admin/login/index.html
index 8e075e9..d7f8736 100644
--- a/frontend/admin/login/index.html
+++ b/frontend/admin/login/index.html
@@ -1,65 +1,70 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Linear Void Admin Login</title>
-    <link rel="stylesheet" href="../../src/style.css" />
-  </head>
 
-  <body class="auth-body">
-    <main class="auth-shell" aria-label="Admin authentication">
-      <section class="auth-card" aria-labelledby="auth-title">
-        <p class="auth-kicker">Linear Void</p>
-        <h1 id="auth-title">Admin Login</h1>
-        <p class="auth-subtitle">Authenticate to access protected admin controls.</p>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Linear Void Admin Login</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Doto:wght@100..900&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Space+Grotesk:wght@300..700&family=Tektur:wght@400..900&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="../../src/style.css" />
+</head>
 
-        <form id="login-form" class="form-stack" novalidate>
-          <label for="username">Username</label>
-          <input id="username" type="text" class="text-input" autocomplete="username" required />
+<body class="auth-body">
+  <main class="auth-shell" aria-label="Admin authentication">
+    <section class="auth-card" aria-labelledby="auth-title">
+      <p class="auth-kicker">Linear Void</p>
+      <h1 id="auth-title">Admin Login</h1>
+      <p class="auth-subtitle">Authenticate to access protected admin controls.</p>
 
-          <label for="password">Password</label>
-          <input id="password" type="password" class="text-input" autocomplete="current-password" required />
+      <form id="login-form" class="form-stack" novalidate>
+        <label for="username">Username</label>
+        <input id="username" type="text" class="text-input" autocomplete="username" required />
 
-          <button id="submit" type="submit" class="btn btn-primary btn-block">Sign in</button>
-          <p id="status" class="status-line" aria-live="polite"></p>
-        </form>
-      </section>
-    </main>
+        <label for="password">Password</label>
+        <input id="password" type="password" class="text-input" autocomplete="current-password" required />
 
-    <script>
-      const form = document.getElementById("login-form");
-      const username = document.getElementById("username");
-      const password = document.getElementById("password");
-      const submit = document.getElementById("submit");
-      const status = document.getElementById("status");
+        <button id="submit" type="submit" class="btn btn-primary btn-block">Sign in</button>
+        <p id="status" class="status-line" aria-live="polite"></p>
+      </form>
+    </section>
+  </main>
 
-      form.addEventListener("submit", async (event) => {
-        event.preventDefault();
-        submit.disabled = true;
-        status.textContent = "Signing in...";
-        status.className = "status-line";
+  <script>
+    const form = document.getElementById("login-form");
+    const username = document.getElementById("username");
+    const password = document.getElementById("password");
+    const submit = document.getElementById("submit");
+    const status = document.getElementById("status");
 
-        try {
-          const response = await fetch("/api/admin/login", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ username: username.value, password: password.value }),
-          });
+    form.addEventListener("submit", async (event) => {
+      event.preventDefault();
+      submit.disabled = true;
+      status.textContent = "Signing in...";
+      status.className = "status-line";
 
-          if (!response.ok) {
-            throw new Error(`HTTP ${response.status}`);
-          }
+      try {
+        const response = await fetch("/api/admin/login", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ username: username.value, password: password.value }),
+        });
 
-          window.location.href = "/admin/";
-        } catch (error) {
-          console.error("Failed to sign in", error);
-          status.textContent = "Login failed. Check your credentials.";
-          status.className = "status-line status-error";
-        } finally {
-          submit.disabled = false;
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`);
         }
-      });
-    </script>
-  </body>
-</html>
+
+        window.location.href = "/admin/";
+      } catch (error) {
+        console.error("Failed to sign in", error);
+        status.textContent = "Login failed. Check your credentials.";
+        status.className = "status-line status-error";
+      } finally {
+        submit.disabled = false;
+      }
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
index 85bf5b2..97523a3 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,6 +5,9 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Linear Void - 24/7 Synchronized Channel</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Doto:wght@100..900&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Space+Grotesk:wght@300..700&family=Tektur:wght@400..900&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="/src/style.css" />
 </head>
 
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 4dd5db3..c159731 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1,7 +1,8 @@
 :root {
   color-scheme: dark;
 
-  --font-body: "Atkinson Hyperlegible", "Segoe UI", "Helvetica Neue", sans-serif;
+  --font-body: "Tektur", "Segoe UI", "Helvetica Neue", sans-serif;
+  --font-heading: "Doto", "Segoe UI", "Helvetica Neue", sans-serif;
   --font-display: "Space Grotesk", "Segoe UI", sans-serif;
   --font-mono: "IBM Plex Mono", Consolas, monospace;
 
@@ -125,7 +126,7 @@ h1,
 h2,
 h3 {
   margin: 0;
-  font-family: var(--font-display);
+  font-family: var(--font-heading);
   color: var(--ink-0);
   letter-spacing: -0.02em;
 }
@@ -539,7 +540,7 @@ select {
 
 .brand-text,
 .viewer-title {
-  font-family: var(--font-display);
+  font-family: var(--font-heading);
 }
 
 .viewer-title {