Test custom.css

2026-03-21 16:00:00 +01:00
parent 90d37c3434
commit b339814ab7
31 changed files with 69122 additions and 1078 deletions
@@ -1,60 +1,56 @@
-# KalliLab bookmarks.yaml
-# Korrektes Homepage-Format: Properties als Liste unter dem Namen
-
- Dokumentation:
-    - Homepage Docs:
-        - href: https://gethomepage.dev/latest/
-          description: Offizielle Homepage-Dokumentation
-          icon: mdi-book-open-page-variant
-
-    - Homepage GitHub:
-        - href: https://github.com/gethomepage/homepage
-          description: Quellcode und Releases
-          icon: mdi-github
-
-    - Portainer Docs:
-        - href: https://docs.portainer.io
-          description: Doku für Container-Management
-          icon: mdi-docker
-
-    - Traefik Docs:
-        - href: https://doc.traefik.io/traefik/
-          description: Reverse-Proxy-Dokumentation
-          icon: mdi-swap-horizontal
-
- KalliLab:
-    - Gitea:
-        - href: https://git.kaleschke.info
-          description: Repositories und Config-Backups
-          icon: mdi-source-repository
-
-    - Homepage:
-        - href: https://home.kaleschke.info
-          description: Dashboard Startseite
-          icon: mdi-view-dashboard
-
-    - Traefik Dashboard:
-        - href: https://traefik.kaleschke.info
-          description: Router, Services und Middleware
-          icon: mdi-swap-horizontal
-
-    - Portainer:
-        - href: https://kallilabcore.local:9443
-          description: Docker-Stacks und Container
-          icon: mdi-docker
-
- Admin & Remote:
-    - Tailscale Admin:
-        - href: https://login.tailscale.com/admin/machines
-          description: Tailnet und Geräteverwaltung
-          icon: mdi-shield-key
-
-    - Cloudflare Dashboard:
-        - href: https://dash.cloudflare.com
-          description: DNS und Tunnel/Records
-          icon: mdi-cloud
+---
+# KalliLab — bookmarks.yaml

+- Dev & Infra:
    - GitHub:
-        - href: https://github.com
-          description: Code, Releases und Integrationen
-          icon: mdi-github
+        - abbr: GH
+          href: https://github.com
+          icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/github.webp
+    - Docker Hub:
+        - abbr: DH
+          href: https://hub.docker.com
+          icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/docker.webp
+    - Cloudflare:
+        - abbr: CF
+          href: https://dash.cloudflare.com
+          icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/cloudflare.webp
+    - Tailscale:
+        - abbr: TS
+          href: https://login.tailscale.com/admin/machines
+          icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/tailscale.webp
+
+- KalliLab Direkt:
+    - Traefik:
+        - abbr: TR
+          href: https://traefik.kaleschke.info
+          icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/traefik.webp
+    - Gitea:
+        - abbr: GT
+          href: https://git.kaleschke.info
+          icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/gitea.webp
+    - Homepage:
+        - abbr: HP
+          href: https://home.kaleschke.info
+          icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/homepage.webp
+    - Code Server:
+        - abbr: CS
+          href: https://code.kaleschke.info
+          icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/code-server.webp
+
+- Homelab Tools:
+    - Homepage Docs:
+        - abbr: HD
+          href: https://gethomepage.dev
+          icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/homepage.webp
+    - selfh.st Icons:
+        - abbr: IC
+          href: https://selfh.st/icons
+          icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/homepage.webp
+    - r/selfhosted:
+        - abbr: RS
+          href: https://www.reddit.com/r/selfhosted
+          icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/reddit.webp
+    - Awesome Selfhosted:
+        - abbr: AS
+          href: https://awesome-selfhosted.net
+          icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/github.webp
@@ -1,3 +1,407 @@
-document.addEventListener("DOMContentLoaded", () => {
-  document.title = "KALLILAB CORE";
-});
+/* ============================================================================
+   KalliLab — CUSTOM JAVASCRIPT
+   Basiert auf LionCityGaming/homepage custom.js (MIT License)
+   Anpassungen: KalliLab Tab-Namen, keine HA/EPL/Glance iFrames
+   ============================================================================ */
+
+const CONFIG = {
+  STORAGE: {
+    KEY: "lastFocusedTabId",
+  },
+  TIMING: {
+    RETRY_DELAY: 500,
+    STANDARD_REFRESH: 1800000, // 30 Minuten
+    QUICK_REFRESH: 60000,      // 1 Minute
+    RETRY_ON_ERROR: 30000,
+    BATCH_DELAY: 100,
+  },
+  SERVICES: {
+    QUICK_REFRESH: [], // keine kritischen Quick-Refresh Widgets
+  },
+};
+
+const RELOAD_BUTTON_SELECTORS = [
+  "#revalidate",
+  '[data-testid="revalidate"]',
+  ".reload-button",
+  'button[aria-label="Reload"]',
+  '[role="button"][aria-label="Reload"]',
+];
+
+// Keine iFrame-Widgets in KalliLab
+const IFRAME_CONFIG = [];
+
+// Tab-Mapping für KalliLab Tabs (5 Tabs)
+const TAB_MAPPING = {
+  "#ueberblick":  ["#Überblick-tab",  "#Überblick"],
+  "#system":      ["#System-tab",     "#System"],
+  "#sicherheit":  ["#Sicherheit-tab", "#Sicherheit"],
+  "#dienste":     ["#Dienste-tab",    "#Dienste"],
+  "#backends":    ["#Backends-tab",   "#Backends"],
+  "":             ["#Überblick-tab",  "#Überblick"],
+};
+
+const state = {
+  lastUpdate: new WeakMap(),
+  currentFocusedTab: null,
+  observers: {
+    reloadButton: null,
+    resize: null,
+  },
+};
+
+const domCache = {
+  myTab: null,
+  tabContents: null,
+  activeTabContent: null,
+
+  initCache() {
+    this.myTab = document.getElementById("myTab");
+    this.tabContents = document.querySelectorAll(".tabcontent");
+    this.updateActiveTab();
+  },
+
+  updateActiveTab() {
+    this.activeTabContent = document.querySelector(".tabcontent.active");
+  },
+
+  clear() {
+    this.myTab = null;
+    this.tabContents = null;
+    this.activeTabContent = null;
+  },
+};
+
+const storage = {
+  save(tabId) {
+    try {
+      localStorage.setItem(CONFIG.STORAGE.KEY, tabId);
+    } catch (error) {
+      console.warn("Storage save failed:", error);
+    }
+  },
+
+  get() {
+    try {
+      return localStorage.getItem(CONFIG.STORAGE.KEY);
+    } catch (error) {
+      console.warn("Storage retrieval failed:", error);
+      return null;
+    }
+  },
+};
+
+function debounce(func, wait) {
+  let timeout;
+  return function executedFunction(...args) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), wait);
+  };
+}
+
+function throttle(func, limit) {
+  let inThrottle;
+  return function executedFunction(...args) {
+    if (!inThrottle) {
+      func.apply(this, args);
+      inThrottle = true;
+      setTimeout(() => (inThrottle = false), limit);
+    }
+  };
+}
+
+function removeReloadButton() {
+  RELOAD_BUTTON_SELECTORS.forEach((selector) => {
+    document.querySelectorAll(selector).forEach((element) => element.remove());
+  });
+}
+
+function setupReloadButtonObserver() {
+  if (state.observers.reloadButton) {
+    return state.observers.reloadButton;
+  }
+
+  const observer = new MutationObserver(
+    throttle((mutations) => {
+      const hasAddedNodes = mutations.some((m) => m.addedNodes.length > 0);
+      if (hasAddedNodes) {
+        removeReloadButton();
+      }
+    }, 100),
+  );
+
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ["class", "style"],
+  });
+
+  state.observers.reloadButton = observer;
+  return observer;
+}
+
+function updateServiceCard(card, data) {
+  requestAnimationFrame(() => {
+    const titleElement = card.querySelector(".card-title");
+    const statusElement = card.querySelector(".card-status");
+
+    if (titleElement && data.title) {
+      titleElement.textContent = data.title;
+    }
+
+    if (statusElement) {
+      statusElement.textContent = Array.isArray(data)
+        ? `${data.length} items`
+        : (data.status ?? (typeof data === "object" ? "Data received" : ""));
+    }
+  });
+}
+
+function updateServiceCardError(card, error) {
+  requestAnimationFrame(() => {
+    const statusElement = card.querySelector(".card-status");
+    if (statusElement) {
+      statusElement.textContent = error.message.includes("404")
+        ? "Service unavailable"
+        : "Error loading data";
+      statusElement.style.color = "red";
+    }
+  });
+}
+
+async function refreshService(card) {
+  const apiEndpoint = card.dataset.apiEndpoint;
+  if (!apiEndpoint) return;
+
+  const serviceId = card.id || apiEndpoint;
+  const now = Date.now();
+  const lastUpdateTime = state.lastUpdate.get(card) || 0;
+  const isQuickRefreshService = CONFIG.SERVICES.QUICK_REFRESH.includes(serviceId);
+  const minInterval = isQuickRefreshService
+    ? CONFIG.TIMING.QUICK_REFRESH
+    : CONFIG.TIMING.STANDARD_REFRESH;
+
+  if (now - lastUpdateTime < minInterval) return;
+
+  try {
+    card.classList.add("updating");
+
+    const response = await fetch(apiEndpoint, {
+      signal: AbortSignal.timeout(10000),
+    }).then((r) => {
+      if (!r.ok) throw new Error(`HTTP ${r.status}`);
+      return r.json();
+    });
+
+    updateServiceCard(card, response);
+    state.lastUpdate.set(card, now);
+  } catch (error) {
+    console.error(`${serviceId} refresh failed:`, error);
+    updateServiceCardError(card, error);
+    state.lastUpdate.set(card, now - (minInterval - CONFIG.TIMING.RETRY_ON_ERROR));
+  } finally {
+    card.classList.remove("updating");
+  }
+}
+
+async function batchUpdateServiceCards(cards) {
+  const batchSize = 3;
+  const batches = [];
+
+  for (let i = 0; i < cards.length; i += batchSize) {
+    batches.push(cards.slice(i, i + batchSize));
+  }
+
+  for (const batch of batches) {
+    await Promise.all(batch.map(refreshService));
+    if (batches.length > 1) {
+      await new Promise((resolve) => setTimeout(resolve, CONFIG.TIMING.BATCH_DELAY));
+    }
+  }
+}
+
+function handleTabFocusFromURL() {
+  const hash = window.location.hash.toLowerCase();
+  const mapping = TAB_MAPPING[hash] || TAB_MAPPING[""];
+  const [tabSelector, contentSelector] = mapping;
+
+  const tabToFocus = document.querySelector(tabSelector);
+  const contentToShow = document.querySelector(contentSelector);
+
+  if (tabToFocus) {
+    setTabFocus(tabToFocus);
+    storage.save(tabToFocus.id);
+
+    domCache.tabContents.forEach((content) => {
+      content.classList.remove("active");
+      content.style.display = "none";
+    });
+
+    if (contentToShow) {
+      showTabContent(contentToShow);
+    }
+  }
+}
+
+function setTabFocus(tab) {
+  requestAnimationFrame(() => {
+    if (state.currentFocusedTab) {
+      state.currentFocusedTab.classList.remove("tab-focused");
+    }
+    state.currentFocusedTab = tab;
+    state.currentFocusedTab.classList.add("tab-focused");
+  });
+}
+
+function showTabContent(contentElement) {
+  if (!contentElement) return;
+
+  contentElement.classList.add("active");
+  contentElement.style.display = "block";
+  domCache.updateActiveTab();
+}
+
+async function preloadAllTabs() {
+  const tabContents = document.querySelectorAll(".tab-pane");
+  const serviceCards = new Set();
+
+  tabContents.forEach((tab) => {
+    tab.querySelectorAll(".service-card").forEach((card) => serviceCards.add(card));
+  });
+
+  await batchUpdateServiceCards(Array.from(serviceCards));
+}
+
+function setupPeriodicRefresh() {
+  const debouncedRefresh = debounce(async () => {
+    if (domCache.activeTabContent) {
+      const cards = domCache.activeTabContent.querySelectorAll(
+        ".service-card[data-api-endpoint]",
+      );
+      await batchUpdateServiceCards(Array.from(cards));
+    }
+  }, 250);
+
+  setInterval(
+    debouncedRefresh,
+    Math.min(CONFIG.TIMING.QUICK_REFRESH, CONFIG.TIMING.STANDARD_REFRESH),
+  );
+
+  document.addEventListener("visibilitychange", () => {
+    if (document.visibilityState === "visible") {
+      debouncedRefresh();
+    }
+  });
+
+  domCache.myTab?.addEventListener("click", (event) => {
+    if (event.target.matches('[id$="-tab"]')) {
+      debouncedRefresh();
+    }
+  });
+}
+
+function initializeTabFocus() {
+  // KalliLab Tab-Selektoren
+  const tabs = document.querySelectorAll(
+    "#Überblick-tab, #System-tab, #Sicherheit-tab, #Dienste-tab, #Backends-tab",
+  );
+
+  handleTabFocusFromURL();
+
+  if (!window.location.hash) {
+    const savedTabId = storage.get();
+    const savedTab = savedTabId && document.getElementById(savedTabId);
+
+    if (savedTab) {
+      setTabFocus(savedTab);
+    } else {
+      const activeTab = document.querySelector(".tabcontent.active");
+      const correspondingTab =
+        activeTab && document.querySelector(`[aria-controls="${activeTab.id}"]`);
+      if (correspondingTab) {
+        setTabFocus(correspondingTab);
+      }
+    }
+  }
+
+  tabs.forEach((tab) => {
+    const handleTabAction = function () {
+      setTabFocus(this);
+      storage.save(this.id);
+    };
+
+    tab.addEventListener("click", handleTabAction);
+
+    tab.addEventListener("keydown", function (e) {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        this.click();
+        handleTabAction.call(this);
+      }
+    });
+  });
+
+  window.addEventListener("beforeunload", () => {
+    if (state.currentFocusedTab) {
+      storage.save(state.currentFocusedTab.id);
+    }
+  });
+}
+
+function initializeEverything() {
+  removeReloadButton();
+  setupReloadButtonObserver();
+
+  [100, 500, 1000].forEach((delay) => {
+    setTimeout(removeReloadButton, delay);
+  });
+
+  const hasRequiredElements =
+    document.querySelector("#myTab") && document.querySelector(".service-card");
+
+  if (hasRequiredElements) {
+    domCache.initCache();
+    initializeTabFocus();
+    preloadAllTabs();
+    setupPeriodicRefresh();
+  } else {
+    setTimeout(initializeEverything, CONFIG.TIMING.RETRY_DELAY);
+  }
+
+  window.addEventListener("orientationchange", () => {
+    setTimeout(removeReloadButton, 100);
+  });
+}
+
+document.addEventListener("DOMContentLoaded", removeReloadButton);
+window.addEventListener("load", initializeEverything);
+
+if (typeof window.htmlLoaded === "function") {
+  const originalHtmlLoaded = window.htmlLoaded;
+  window.htmlLoaded = () => {
+    originalHtmlLoaded();
+    initializeEverything();
+  };
+}
+
+if ("ontouchstart" in window) {
+  window.addEventListener("touchend", () => {
+    setTimeout(removeReloadButton, 100);
+  }, { passive: true });
+}
+
+function cleanup() {
+  if (state.observers.reloadButton) {
+    state.observers.reloadButton.disconnect();
+    state.observers.reloadButton = null;
+  }
+  if (state.observers.resize) {
+    state.observers.resize.disconnect();
+    state.observers.resize = null;
+  }
+  domCache.clear();
+  state.currentFocusedTab = null;
+}
+
+window.addEventListener("unload", cleanup);
@@ -1,2 +1,2 @@
 my-docker:
-  socketPath: /var/run/docker.sock
+  socket: /var/run/docker.sock
@@ -1,52 +1,128 @@
-# KalliLab Homepage services.yaml
-# KALLISCOPE Redesign — V7 (Bugfix)
-# Alle URLs, Tokens, Keys und Container UNVERÄNDERT
-# Emojis aus Gruppen-Namen entfernt (Tab-Rendering-Fix)
-# Bookmarks ausgelagert in bookmarks.yaml
+---
+# ============================================================================
+# KalliLab — services.yaml
+# Neu strukturiert auf 2 Tabs: Home + Media
+# URLs / Tokens / Keys unverändert übernommen
+# ============================================================================

-# ────────────────────────────────────────────────────────
-#  TAB: Uebersicht — Tägliche Arbeitsoberfläche
-# ────────────────────────────────────────────────────────
- Control Center:
-    - Portainer:
-        icon: portainer.png
-        href: https://kallilabcore.local:9443
-        description: Docker- und Stack-Management
-        server: my-docker
-        container: PortainerCE
-        widget:
-          type: portainer
-          url: https://192.168.178.58:9443
-          env: 1
-          key: ptr_OoyIiXDLUaCj5sbYzr3f2BmeBVgi+WVnZDyX1OOlvJo=
+# ============================================================================
+# TAB: Home — SYSTEM TELEMETRY
+# ============================================================================
+- SYSTEM TELEMETRY:

-    - Immich:
-        icon: immich.png
-        href: http://kallilabcore.local:2283
-        description: Foto- und Videoverwaltung
+    - System Info:
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/glances.webp
+        href: http://kallilabcore.local:61208
+        description: OS · Kernel · Uptime
        server: my-docker
-        container: immich_server
+        container: Glances
        widget:
-          type: immich
-          url: http://192.168.178.58:2283
-          key: FjgVSrXUaHZ7cymFtd1adRpq2naz1nijTqjqxuvGbs
-          version: 2
+          type: glances
+          url: http://192.168.178.58:61208
+          version: 4
+          metric: info

-    - Paperless-ngx:
-        icon: paperless-ngx.png
-        href: http://kallilabcore.local:8000
-        description: Dokumentenarchiv und OCR
+    - CPU Usage:
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/glances.webp
+        href: http://kallilabcore.local:61208
+        description: Prozessorauslastung
        server: my-docker
-        container: paperless-ngx
+        container: Glances
        widget:
-          type: paperlessngx
-          url: http://192.168.178.58:8000
-          key: 65aa6948d2a6f3ef3d403a4a0d76891e7ae82cbe
+          type: glances
+          url: http://192.168.178.58:61208
+          version: 4
+          metric: cpu
+          chart: true
+
+    - Memory:
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/glances.webp
+        href: http://kallilabcore.local:61208
+        description: RAM-Nutzung
+        server: my-docker
+        container: Glances
+        widget:
+          type: glances
+          url: http://192.168.178.58:61208
+          version: 4
+          metric: memory
+          chart: true
+
+    - Network:
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/glances.webp
+        href: http://kallilabcore.local:61208
+        description: Netzwerk-Traffic
+        server: my-docker
+        container: Glances
+        widget:
+          type: glances
+          url: http://192.168.178.58:61208
+          version: 4
+          metric: network:eth0
+          chart: true
+
+# ============================================================================
+# TAB: Home — STORAGE & I/O
+# ============================================================================
+- STORAGE & I/O:
+
+    - System Disk:
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/scrutiny-light.webp
+        href: http://192.168.178.58:8080/web/dashboard
+        description: Primärer Datenträger
+        server: my-docker
+        container: Glances
+        widget:
+          type: glances
+          url: http://192.168.178.58:61208
+          version: 4
+          metric: fs:/
+
+    - Disk I/O:
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/glances.webp
+        href: http://kallilabcore.local:61208
+        description: Lese-/Schreibraten
+        server: my-docker
+        container: Glances
+        widget:
+          type: glances
+          url: http://192.168.178.58:61208
+          version: 4
+          metric: disk:sda
+          chart: true
+
+    - S.M.A.R.T. Status:
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/scrutiny-light.webp
+        href: http://192.168.178.58:8080/web/dashboard
+        description: Festplatten-Gesundheit
+        server: my-docker
+        container: scrutiny
+        widget:
+          type: scrutiny
+          url: http://192.168.178.58:8080
+
+    - Top Processes:
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/glances.webp
+        href: http://kallilabcore.local:61208
+        description: Prozesse nach CPU
+        server: my-docker
+        container: Glances
+        widget:
+          type: glances
+          url: http://192.168.178.58:61208
+          version: 4
+          metric: process
+
+# ============================================================================
+# TAB: Home — CORE SERVICES
+# Hero-Bereich oben
+# ============================================================================
+- CORE SERVICES:

    - Pi-hole:
-        icon: pi-hole.png
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/pi-hole.webp
        href: http://kallilabcore.local:8543
-        description: Netzwerkweites DNS-Blocking
+        description: DNS-Blocking · Netzwerkschutz
        server: my-docker
        container: binhex-official-pihole
        widget:
@@ -55,30 +131,96 @@
          version: 6
          key: kuchen123

-    - Code Server:
-        icon: vscode.png
-        href: https://code.kaleschke.info
-        description: Browserbasierte Entwicklungsumgebung
+    - Portainer:
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/portainer.webp
+        href: https://kallilabcore.local:9443
+        description: Docker · Stack Management
        server: my-docker
-        container: code-server
-        ping: true
+        container: PortainerCE
+        widget:
+          type: portainer
+          url: https://192.168.178.58:9443
+          env: 2
+          key: ptr_OoyIiXDLUaCj5sbYzr3f2BmeBVgi+WVnZDyX1OOlvJo=

-    - Paperless-AI:
-        icon: mdi-file-document-edit-outline
-        href: http://kallilabcore.local:3236
-        description: KI-Auswertung für Paperless-ngx
+    - Uptime Kuma:
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/uptime-kuma.webp
+        href: http://kallilabcore.local:3001
+        description: Service-Monitoring · Statusseiten
        server: my-docker
-        container: Paperless-AI
-        ping: true
+        container: UptimeKuma
+        widget:
+          type: uptimekuma
+          url: http://192.168.178.58:3001
+          slug: kallilab
+
+    - Netdata:
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/netdata.webp
+        href: http://192.168.178.58:19999
+        description: Echtzeit-Telemetrie
+        server: my-docker
+        container: netdata
+        widget:
+          type: netdata
+          url: http://192.168.178.58:19999
+
+# ============================================================================
+# TAB: Home — APPS
+# Unten einfache Kacheln, keine Dopplungen aus dem Hero-Bereich
+# ============================================================================
+- APPS:
+
+    - Immich:
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/immich.webp
+        href: http://kallilabcore.local:2283
+        description: Fotos & Videos
+        server: my-docker
+        container: immich_server
+        siteMonitor: http://192.168.178.58:2283
+        widget:
+          type: immich
+          url: http://192.168.178.58:2283
+          key: FjgVSrXUaHZ7cymFtd1adRpq2naz1nijTqjqxuvGbs
+          version: 2
+
+    - Paperless-ngx:
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/paperless-ngx.webp
+        href: http://kallilabcore.local:8000
+        description: Dokumentenarchiv
+        server: my-docker
+        container: paperless-ngx
+        widget:
+          type: paperlessngx
+          url: http://192.168.178.58:8000
+          key: 65aa6948d2a6f3ef3d403a4a0d76891e7ae82cbe
+
+    - Mealie:
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/mealie.webp
+        href: http://kallilabcore.local:9935
+        description: Rezepte & Planung
+        server: my-docker
+        container: mealie
+        widget:
+          type: mealie
+          url: http://192.168.178.58:9935
+          key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJsb25nX3Rva2VuIjp0cnVlLCJpZCI6IjgxY2VmODBjLTMwZDAtNDM2OS04MjY4LWJkNTRhYmNjZmQ2MyIsIm5hbWUiOiJEYXNoYm9hcmQiLCJpbnRlZ3JhdGlvbl9pZCI6ImdlbmVyaWMiLCJleHAiOjE5MzE3MDM2NDJ9.tdUSLNqmU_uz1HkVgZhnudBnafbGs-pUeY4xqeogAwc
+          version: 2
+
+    - Gotify:
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/gotify.webp
+        href: http://192.168.178.58:8088
+        description: Push-Benachrichtigungen
+        server: my-docker
+        container: gotify
+        widget:
+          type: gotify
+          url: http://192.168.178.58:8088
+          key: C9iOZu1HC7NnIVi

-# ────────────────────────────────────────────────────────
-#  TAB: System — Infrastruktur & Monitoring
-# ────────────────────────────────────────────────────────
- Infrastruktur:
    - Traefik:
-        icon: traefik.png
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/traefik.webp
        href: https://traefik.kaleschke.info
-        description: Reverse Proxy und Routing
+        description: Reverse Proxy
        server: my-docker
        container: traefik
        widget:
@@ -88,9 +230,9 @@
          password: ichwillcocacola

    - Gitea:
-        icon: gitea.png
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/gitea.webp
        href: https://git.kaleschke.info
-        description: Git-Hosting und Projektverwaltung
+        description: Git-Hosting
        server: my-docker
        container: gitea
        widget:
@@ -98,307 +240,202 @@
          url: https://git.kaleschke.info
          key: e0da0f8534d83d8445dd98deee1b35539c4cac01

-    - Portainer:
-        icon: portainer.png
-        href: https://kallilabcore.local:9443
-        description: Stack- und Container-Management
-        server: my-docker
-        container: PortainerCE
-        widget:
-          type: portainer
-          url: https://192.168.178.58:9443
-          env: 1
-          key: ptr_OoyIiXDLUaCj5sbYzr3f2BmeBVgi+WVnZDyX1OOlvJo=
-
    - Homepage:
-        icon: homepage.png
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/homepage.webp
        href: https://home.kaleschke.info
-        description: Zentrale Startseite für KalliLab
+        description: Startseite
        server: my-docker
        container: homepage
-        ping: true
+        siteMonitor: https://home.kaleschke.info
+
+    - Dozzle:
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/dozzle.webp
+        href: http://kallilabcore.local:9888
+        description: Container-Logs
+        server: my-docker
+        container: Dozzle
+        siteMonitor: http://192.168.178.58:9888

    - Tailscale:
-        icon: tailscale.png
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/tailscale.webp
        href: https://login.tailscale.com/admin/machines
-        description: Sichere Remote-Vernetzung
+        description: VPN-Mesh
        server: my-docker
        container: Tailscale-Docker

+    - Theme Park:
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/theme-park.webp
+        href: http://kallilabcore.local:8009
+        description: UI-Themes
+        server: my-docker
+        container: theme-park
+        siteMonitor: http://192.168.178.58:8009
+
    - DDNS Updater:
-        icon: sh-qdm12.png
-        description: DynDNS-Aktualisierung im Hintergrund
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/ddns-updater.webp
+        description: DynDNS
        server: my-docker
        container: ddns-updater

    - DIUN:
-        icon: docker.png
-        description: Benachrichtigt über neue Container-Images
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/diun.webp
+        description: Image-Alerts
        server: my-docker
        container: diun

-    - Dozzle:
-        icon: dozzle.png
-        href: http://kallilabcore.local:9888
-        description: Live-Logs für Docker-Container
-        server: my-docker
-        container: Dozzle
-        ping: true
-
-    - Theme Park:
-        icon: mdi-palette
-        href: http://kallilabcore.local:8009
-        description: Theming- und UI-Assets
-        server: my-docker
-        container: theme-park
-        ping: true
-
- Monitoring:
-    - Uptime Kuma:
-        icon: uptime-kuma.png
-        href: http://kallilabcore.local:3001
-        description: Service-Monitoring und Statusseiten
-        server: my-docker
-        container: UptimeKuma
-        widget:
-          type: uptimekuma
-          url: http://192.168.178.58:3001
-          slug: uk1_ITsgGkyd_fIWRUjkZ5V2QZI5Pd6N_rsCrvLeQ5mJ
-
-    - Netdata:
-        icon: netdata.png
-        href: http://192.168.178.58:19999
-        description: Echtzeit-Telemetrie für Host und Dienste
-        server: my-docker
-        container: netdata
-        widget:
-          type: netdata
-          url: http://192.168.178.58:19999
-
-    - Glances:
-        icon: glances.png
-        href: http://kallilabcore.local:61208
-        description: Host-Metriken und Prozessübersicht
-        server: my-docker
-        container: Glances
-        widget:
-          type: glances
-          url: http://192.168.178.58:61208
-          version: 4
-          metric: info
-
-    - Scrutiny:
-        icon: scrutiny.png
-        href: http://192.168.178.58:8080/web/dashboard
-        description: S.M.A.R.T.-Monitoring für Festplatten
-        server: my-docker
-        container: scrutiny
-        widget:
-          type: scrutiny
-          url: http://192.168.178.58:8080
-
    - Dashdot:
-        icon: dashdot.png
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/dashdot.webp
        href: http://kallilabcore.local:3002
-        description: Moderner Server-Dashboard-Überblick
+        description: Server-Dashboard
        server: my-docker
        container: dashdot
-        ping: true
+        siteMonitor: http://192.168.178.58:3002

    - ntopng:
-        icon: si-ntop
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/ntopng.webp
        href: http://kallilabcore.local:3000
-        description: Netzwerktraffic und Flows analysieren
+        description: Netzwerktraffic
        server: my-docker
        container: ntopng
-        ping: true
+        siteMonitor: http://192.168.178.58:3000

    - NetAlertX:
-        icon: netalertx.png
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/netalertx.webp
        href: http://192.168.178.58:20211
-        description: Netzwerkgeräte erkennen und überwachen
+        description: Netzwerkgeräte
        server: my-docker
        container: netalertx

-    - Gotify:
-        icon: gotify.png
-        href: http://192.168.178.58:8088
-        description: Push-Benachrichtigungen für KalliLab
+    - Code Server:
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/code-server.webp
+        href: https://code.kaleschke.info
+        description: Browser-IDE
        server: my-docker
-        container: gotify
+        container: code-server
+        siteMonitor: https://code.kaleschke.info

-# ────────────────────────────────────────────────────────
-#  TAB: Security — Netzwerk & Zugang
-# ────────────────────────────────────────────────────────
- Netzwerk und Sicherheit:
-    - Pi-hole:
-        icon: pi-hole.png
-        href: http://kallilabcore.local:8543
-        description: Netzwerkweites DNS-Blocking
+    - Paperless-AI:
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/paperless-ngx.webp
+        href: http://kallilabcore.local:3236
+        description: KI-Dokumente
        server: my-docker
-        container: binhex-official-pihole
-        widget:
-          type: pihole
-          url: http://192.168.178.58:8543
-          version: 6
-          key: kuchen123
+        container: Paperless-AI
+        siteMonitor: http://192.168.178.58:3236
+
+    - Vaultwarden:
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/vaultwarden.webp
+        href: https://kallilabcore.taild9fcf2.ts.net:4743
+        description: Passwortmanager
+        server: my-docker
+        container: vaultwarden
+        siteMonitor: https://kallilabcore.taild9fcf2.ts.net:4743

    - Unbound:
-        icon: unbound.png
-        description: Rekursiver DNS-Resolver
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/unbound.webp
+        description: DNS-Resolver
        server: my-docker
        container: unbound

-    - Vaultwarden:
-        icon: vaultwarden.png
-        href: https://kallilabcore.taild9fcf2.ts.net:4743
-        description: Passwortmanager für Familie und Homelab
-        server: my-docker
-        container: vaultwarden
-        ping: true
-
    - Mail Archiver:
-        icon: mdi-email-fast-outline
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/mailpit.webp
        href: http://kallilabcore.local:5000
-        description: Mail-Archivierung und Suche
+        description: Mail-Archiv
        server: my-docker
        container: mail-archiver
-        ping: true
+        siteMonitor: http://192.168.178.58:5000

-# ────────────────────────────────────────────────────────
-#  TAB: Dienste — Cloud, Medien & Backups
-# ────────────────────────────────────────────────────────
- Cloud und Produktivitaet:
-    - Paperless-ngx:
-        icon: paperless-ngx.png
-        href: http://kallilabcore.local:8000
-        description: Dokumentenarchiv und OCR
-        server: my-docker
-        container: paperless-ngx
-        widget:
-          type: paperlessngx
-          url: http://192.168.178.58:8000
-          key: 65aa6948d2a6f3ef3d403a4a0d76891e7ae82cbe
-
-    - Mealie:
-        icon: mealie.png
-        href: http://kallilabcore.local:9935
-        description: Rezeptverwaltung und Meal Planning
-        server: my-docker
-        container: mealie
-        widget:
-          type: mealie
-          url: http://192.168.178.58:9935
-          key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJsb25nX3Rva2VuIjp0cnVlLCJpZCI6IjgxY2VmODBjLTMwZDAtNDM2OS04MjY4LWJkNTRhYmNjZmQ2MyIsIm5hbWUiOiJEYXNoYm9hcmQiLCJpbnRlZ3JhdGlvbl9pZCI6ImdlbmVyaWMiLCJleHAiOjE5MzE3MDM2NDJ9.tdUSLNqmU_uz1HkVgZhnudBnafbGs-pUeY4xqeogAwc
-          version: 2
-
-    - Paperless-AI:
-        icon: mdi-file-document-edit-outline
-        href: http://kallilabcore.local:3236
-        description: KI-Auswertung für Paperless-ngx
-        server: my-docker
-        container: Paperless-AI
-        ping: true
-
-    - Scanopy Server:
-        icon: mdi-scanner
+    - Scanopy:
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/paperless-ngx.webp
        href: http://kallilabcore.local:60072
-        description: Scanopy Weboberfläche
+        description: Scan-Workflow
        server: my-docker
        container: scanopy-server
-        ping: true
+        siteMonitor: http://192.168.178.58:60072
+
+    - luckyBackup:
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/luckybackup.webp
+        href: http://kallilabcore.local:7675/vnc.html?autoconnect=true
+        description: Backup-GUI
+        server: my-docker
+        container: luckyBackup
+        siteMonitor: http://192.168.178.58:7675

    - Scanopy Daemon:
-        icon: mdi-cog-transfer
-        description: Hintergrunddienst für Scanopy
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/paperless-ngx.webp
+        description: Hintergrunddienst
        server: my-docker
        container: scanopy-daemon

-    - luckyBackup:
-        icon: mdi-backup-restore
-        href: http://kallilabcore.local:7675/vnc.html?autoconnect=true
-        description: GUI-Backupjobs via noVNC
-        server: my-docker
-        container: luckyBackup
-        ping: true
+# ============================================================================
+# TAB: Home — BACKENDS MINI
+# ============================================================================
+- BACKENDS MINI:

- Medien:
-    - Immich:
-        icon: immich.png
-        href: http://kallilabcore.local:2283
-        description: Foto- und Videoverwaltung
-        server: my-docker
-        container: immich_server
-        widget:
-          type: immich
-          url: http://192.168.178.58:2283
-          key: FjgVSrXUaHZ7cymFtd1adRpq2naz1nijTqjqxuvGbs
-          version: 2
-
-    - Plex:
-        icon: plex.png
-        href: http://kallilabcore.local:32400/web
-        description: Medienserver für Filme und Serien
-        server: my-docker
-        container: Plex-Media-Server
-        widget:
-          type: plex
-          url: http://kallilabcore.local:32400
-          key: YOUR_PLEX_TOKEN
-
-    - Stash:
-        icon: stash.png
-        href: http://kallilabcore.local:6969
-        description: Medienbibliothek und Metadaten
-        server: my-docker
-        container: Stash
-        widget:
-          type: stash
-          url: http://kallilabcore.local:6969
-          key: YOUR_STASH_API_KEY
-
-# ────────────────────────────────────────────────────────
-#  TAB: Backends — Datenbanken & Worker
-# ────────────────────────────────────────────────────────
- Daten und Backends:
    - PostgreSQL 17:
-        icon: postgres.png
-        description: Gemeinsame PostgreSQL-Instanz
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/postgresql.webp
+        description: Shared Postgres
        server: my-docker
        container: postgresql17

    - Redis:
-        icon: redis.png
-        description: Shared Redis für Services
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/redis.webp
+        description: Shared Cache
        server: my-docker
        container: Redis

    - Mealie Postgres:
-        icon: postgres.png
-        description: Datenbank für Mealie
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/postgresql.webp
+        description: DB für Mealie
        server: my-docker
        container: mealie-postgres

    - Scanopy Postgres:
-        icon: postgres.png
-        description: Datenbank für Scanopy
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/postgresql.webp
+        description: DB für Scanopy
        server: my-docker
        container: scanopy-postgres

    - Immich Machine Learning:
-        icon: immich.png
-        description: ML-Worker für Immich
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/immich.webp
+        description: ML für Immich
        server: my-docker
        container: immich_machine_learning

    - Immich Postgres:
-        icon: postgres.png
-        description: Datenbank für Immich
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/postgresql.webp
+        description: DB für Immich
        server: my-docker
        container: immich_postgres

    - Immich Redis:
-        icon: redis.png
-        description: Redis-Cache für Immich
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/redis.webp
+        description: Cache für Immich
        server: my-docker
        container: immich_redis
+
+# ============================================================================
+# TAB: Media — MEDIA
+# ============================================================================
+- MEDIA:
+
+    - Plex:
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/plex.webp
+        href: http://kallilabcore.local:32400/web
+        description: Medienserver
+        server: my-docker
+        container: Plex-Media-Server
+        widget:
+          type: plex
+          url: http://192.168.178.58:32400
+          key: YOUR_PLEX_TOKEN
+
+    - Stash:
+        icon: https://cdn.jsdelivr.net/gh/selfhst/icons/webp/stash.webp
+        href: http://kallilabcore.local:6969
+        description: Medienbibliothek
+        server: my-docker
+        container: Stash
+        widget:
+          type: stash
+          url: http://192.168.178.58:6969
+          key: YOUR_STASH_API_KEY
@@ -1,88 +1,72 @@
 title: KalliLab
-favicon: https://home.kaleschke.info/favicon.ico
+favicon: /images/icons/logo.png
+
+disableCollapse: false
+
+background:
+  image: /images/ay2262vnvz8c1.webp
+  saturate: 1
+  brightness: 100
+  opacity: 100
+
+cardBlur: 4xl
 theme: dark
-color: slate
-headerStyle: clean
+color: emerald
+headerStyle: underlined
+iconStyle: theme
 statusStyle: dot
-target: _blank
-hideVersion: false
-language: de
-useEqualHeights: true

 quicklaunch:
  searchDescriptions: true
-  hideInternetSearch: false
-  showSearchSuggestions: true

-background:
-  image: /images/background_dashboard.png
-  opacity: 65
-  blur: 0
-  saturate: 100
-  brightness: 80
+hideVersion: true
+hideErrors: false
+fiveColumns: false
+useEqualHeights: true
+preloadAllWidgets: true
+target: _blank

-# ──────────────────────────────────────────────────────────
-#  WICHTIG: Emojis in Gruppen-Namen wurden entfernt.
-#  Homepage kann Emojis in Tab-Zuweisungen nicht zuverlässig
-#  verarbeiten — Sonderzeichen führen zu Rendering-Bugs.
-#  Das CSS adressiert die Gruppen weiterhin korrekt via
-#  data-name Attribut (ohne Emoji).
-# ──────────────────────────────────────────────────────────
+language: de
+customJS: /custom.js

 layout:
-
-  # ── TAB 1: Tägliche Arbeitsoberfläche ──
-  "Control Center":
-    tab: "Uebersicht"
-    style: row
-    columns: 3
-
-  # Bookmarks auf Tab 1 (aus bookmarks.yaml)
-  "Dokumentation":
-    tab: "Uebersicht"
-    style: row
-    columns: 3
-
-  "KalliLab":
-    tab: "Uebersicht"
-    style: row
-    columns: 3
-
-  "Admin & Remote":
-    tab: "Uebersicht"
-    style: row
-    columns: 3
-
-  # ── TAB 2: Infrastruktur & Monitoring ──
-  "Infrastruktur":
-    tab: "System"
+  SYSTEM TELEMETRY:
+    header: false
+    tab: Home
    style: row
    columns: 4

-  "Monitoring":
-    tab: "System"
+  STORAGE & I/O:
+    header: false
+    tab: Home
    style: row
    columns: 4

-  # ── TAB 3: Netzwerk & Zugang ──
-  "Netzwerk und Sicherheit":
-    tab: "Security"
-    style: row
-    columns: 3
-
-  # ── TAB 4: Cloud, Produktivität & Medien ──
-  "Cloud und Produktivitaet":
-    tab: "Dienste"
+  CORE SERVICES:
+    header: false
+    tab: Home
    style: row
    columns: 4

-  "Medien":
-    tab: "Dienste"
+  APPS:
+    header: false
+    tab: Home
    style: row
-    columns: 3
+    columns: 6

-  # ── TAB 5: Datenbanken & Worker ──
-  "Daten und Backends":
-    tab: "Backends"
+  BACKENDS MINI:
+    header: false
+    tab: Home
    style: row
    columns: 4
+
+  MEDIA:
+    header: false
+    tab: Media
+    style: row
+    columns: 4
+
+tabs:
+  - name: Home
+    initialTab: true
+  - name: Media
@@ -1,28 +1,52 @@
-# KalliLab Homepage widgets.yaml
+- logo:
+    icon: /images/icons/logo.png
+    href: https://home.kaleschke.info
+    target: _blank

 - greeting:
-    text_size: xl
+    text_size: 3xl
    text: KalliLab
-
- resources:
-    label: System
-    cpu: true
-    memory: true
-    cputemp: true
-    uptime: true
-    network: true
-    refresh: 3000
-
- search:
-    provider: duckduckgo
-    focus: true
-    showSearchSuggestions: true
+    href: https://home.kaleschke.info
    target: _blank

 - datetime:
    locale: de-DE
-    text_size: xl
+    text_size: 3xl
    format:
-      dateStyle: medium
+      dateStyle: full
+      hour12: false
      timeStyle: short
-      hourCycle: h23
+
+# Jede Metrik = eigener Block = alle nebeneinander
+- resources:
+    cpu: true
+
+- resources:
+    memory: true
+
+- resources:
+    cputemp: true
+    units: metric
+
+- resources:
+    uptime: true
+
+- resources:
+    label: KalliLab
+    disk: /
+    href: http://kallilabcore.local:61208
+    target: _blank
+
+- search:
+    provider: google
+    focus: false
+    target: _blank
+
+- openmeteo:
+    label: KalliLab
+    latitude: 52.1497
+    longitude: 7.5205
+    units: metric
+    cache: 5
+    format:
+      maximumFractionDigits: 1