Feinschliff Phase 2: Dashboard Redesign, RAM Check, Accordions

static/index.html

@@ -22,7 +22,7 @@
       <a class="nav-item" data-view="guides" title="Guides" data-ic="help"></a>
     </nav>
     <div class="side-foot">
-      <span class="nav-item disabled" title="Einstellungen (bald)" data-ic="settings"></span>
+      <span class="nav-item" title="Einstellungen" data-ic="settings" id="nav-settings"></span>
     </div>
   </aside>
 
@@ -31,11 +31,7 @@
     <header class="topbar">
       <span class="status-pill"><span id="swdot" class="dot"></span><span id="swlabel">verbinde…</span></span>
       <span class="spacer"></span>
-      <span class="top-stat">Aktiv:<b id="top-active" style="color:var(--teal)">–</b></span>
-      <span class="top-stat" style="margin-left:8px">Modelle<b id="top-models">–</b></span>
-      <span class="top-stat">Jobs<b id="top-jobs">0</b></span>
-      <span class="top-clock" id="clock">--:--</span>
-      <input id="token" class="tokin" placeholder="Token" autocomplete="off">
+      <span class="top-stat" id="top-active-text" style="color:var(--teal)">Kein Modell geladen</span>
     </header>
 
     <!-- Alert-Banner (wird per JS ein-/ausgeblendet) -->
@@ -46,7 +42,13 @@
 
       <section class="view" data-view="overview">
         <div id="hero"></div>
-        <div class="card" id="ov-models" style="margin-top: 24px"></div>
+        
+        <div class="grid grid-3" id="ov-quick" style="margin-top: 24px"></div>
+        
+        <div class="grid grid-2" style="margin-top: 24px; align-items: start;">
+          <div class="card" id="ov-models"></div>
+          <div class="card" id="ov-recent-jobs"></div>
+        </div>
       </section>
 
       <section class="view" data-view="activity" hidden>
@@ -78,6 +80,20 @@
   </div>
 </div>
 
+<!-- Settings Modal -->
+<div id="settings-modal" style="display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.8); z-index:100; align-items:center; justify-content:center;">
+  <div class="card" style="width:100%; max-width:400px; position:relative">
+    <button id="sm-close" class="ghost" style="position:absolute; top:12px; right:12px;">Schließen</button>
+    <h2 style="margin-top:0">Einstellungen</h2>
+    
+    <div style="margin-top:24px">
+      <label>API Token (Authentifizierung)</label>
+      <input id="token" class="tokin" placeholder="Optionales API Token..." autocomplete="off">
+      <div class="meta" style="font-size:12px; margin-top:4px;">Wird für die WebSockets und API Calls genutzt, falls der Server geschützt ist.</div>
+    </div>
+  </div>
+</div>
+
 <div id="toast" class="toast"></div>
 
 <!-- Icons in die Nav/Logo einsetzen, bevor das Haupt-Modul laedt -->