Erste Version

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

ui/index.html

@@ -0,0 +1,86 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>BSO Launcher</title>
+  <link rel="stylesheet" href="app.css">
+  <script src="app.js" defer></script>
+</head>
+<body>
+  <!-- Eigene Titelleiste (das Fenster hat keine von Windows) -->
+  <header class="titlebar">
+    <div class="titlebar-drag" id="titlebarDrag">
+      <img src="logo.png" alt="">
+      <span>BSO Launcher</span>
+    </div>
+    <div class="window-buttons">
+      <button type="button" data-window="minimize" title="Minimieren" aria-label="Minimieren">&#xE921;</button>
+      <button type="button" data-window="maximize" id="maximizeButton" title="Maximieren" aria-label="Maximieren">&#xE922;</button>
+      <button type="button" data-window="close" class="close" title="Schliessen" aria-label="Schliessen">&#xE8BB;</button>
+    </div>
+  </header>
+
+  <!-- Anmeldung / Registrierung -->
+  <main id="auth" class="auth hidden">
+    <form id="authForm" class="auth-card" autocomplete="on">
+      <div class="brand big">
+        <img src="logo.svg" alt="">
+        <div>
+          <div class="brand-title">BSO <span class="beta-pill">BETA</span></div>
+          <div class="brand-sub">Bus Simulator Online</div>
+        </div>
+      </div>
+      <div class="tabs">
+        <button type="button" class="tab on" id="tabLogin">Anmelden</button>
+        <button type="button" class="tab" id="tabRegister">Konto erstellen</button>
+      </div>
+      <label><span>Benutzername</span>
+        <input id="username" autocomplete="username" maxlength="32" required>
+      </label>
+      <label id="emailRow" class="hidden"><span>E-Mail (optional)</span>
+        <input id="email" type="email" autocomplete="email" maxlength="190">
+      </label>
+      <label><span>Passwort</span>
+        <input id="password" type="password" autocomplete="current-password" maxlength="200" required>
+      </label>
+      <label id="password2Row" class="hidden"><span>Passwort wiederholen</span>
+        <input id="password2" type="password" autocomplete="new-password" maxlength="200">
+      </label>
+      <p id="authError" class="error hidden"></p>
+      <button class="btn primary wide" id="authButton" type="submit">Anmelden</button>
+      <p class="muted small center">Dein Benutzername ist auch dein Name im Spiel. Passwoerter liegen nur verschluesselt auf dem BSO-Server.</p>
+    </form>
+  </main>
+
+  <!-- Launcher -->
+  <div id="app" class="layout hidden">
+    <aside class="sidebar">
+      <div class="brand">
+        <img src="logo.svg" alt="">
+        <div>
+          <div class="brand-title">BSO <span class="beta-pill">BETA</span></div>
+          <div class="brand-sub">Launcher</div>
+        </div>
+      </div>
+      <nav id="nav">
+        <button type="button" data-page="home" class="on"><span class="nav-icon">&#xE768;</span>Spielen</button>
+        <button type="button" data-page="news"><span class="nav-icon">&#xE789;</span>Neuigkeiten</button>
+        <button type="button" data-page="settings"><span class="nav-icon">&#xE713;</span>Einstellungen</button>
+      </nav>
+      <div class="sidebar-foot">
+        <div class="me-card">
+          <span class="avatar" id="meAvatar">?</span>
+          <span class="me-text"><b id="meName"></b><small id="meVersion"></small></span>
+          <button class="icon-btn" id="logout" type="button" title="Abmelden" aria-label="Abmelden">&#xF3B1;</button>
+        </div>
+      </div>
+    </aside>
+    <section class="content">
+      <div id="page" class="page"></div>
+    </section>
+  </div>
+
+  <div id="toasts" class="toasts"></div>
+</body>
+</html>