# 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.