Files
Space-Theme/docs

Space UI Demo v2 (PHP + CSS + JS)

Übersicht

Diese Demo zeigt eine HUD-artige Navigation mit statischem Hauptmenü, kontextabhängiger Subnav, Sticky-Ressourcenleiste, Toasts und einem generischen Content-Bereich. Das HTML wird vom zentralen Entry-Point public/index.php zusammengesetzt, die einzelnen Bausteine liegen als Partial-Templates in src/partials.

Verzeichnisstruktur

  • web/desktop/public/: Dokumentenwurzel für den Desktop-Entry-Point und seine Assets (assets/).
  • web/desktop/src/partials/: Die PHP-Partial-Templates für Menüs, Ressourcen und Content im Desktop-Build.
  • web/mobile/public/: Mobile-Entry-Point; derzeit eine Kopie des Desktop-Systems, die für responsive Änderungen angepasst werden kann.
  • web/mobile/src/partials/: Mobile-Partial-Templates (momentan identisch zum Desktop-Set).

Layout-Highlights

  • Sidebar: Hauptmenü (links) mit statischem Link-Set plus optionaler Planetenliste auf der Unterseite.
  • Topbar & Notification-Dropdown: Anzeige, Actions & Test-Toast-Button.
  • Subnav: Mittig platzierte Tabs (Kontextmenü) basierend auf dem $subnav-Array in public/index.php.
  • Ressourcenleiste: Sticky-Komponente unterhalb der Subnav (src/partials/ressourcen.php).
  • Content: Demo-Inhalte aus src/partials/site.php, die Sections und Subpages simulieren.
  • Footer: Menü-Links und optionaler Admin-Chip, gesteuert über $isAdmin.

Lokale Entwicklung

  1. cd /path/to/Space-Theme.
  2. php -S localhost:8000 -t web/desktop/public (setzt die Dokumentenwurzel auf den Desktop-Build).
  3. Öffne http://localhost:8000/index.php und wechsle z.B. über ?s=build&p=demolish die Sections oder wechsle mit -t web/mobile/public zur mobilen Variante.

Hinweise

  • Die PHP-Session (session_start()) im Entry-Point dient Flash-Toasts und Alert-Messages.
  • Die Partial-Templates erwarten die Variablen $section, $sub, $planet und greifen über $partialsPath aus web/public/index.php aufeinander zu.
  • Performance-/Alert-Profile werden über sessionStorage bzw. localStorage gesteuert die Buttons in public/assets/ui.js sorgen für die Visualisierung.