New desktop

public/assets/desktop/desktop.css

@@ -0,0 +1,332 @@
+:root {
+    color-scheme: light;
+    --shell-text: #f8fafc;
+    --shell-panel: rgba(15, 23, 42, 0.42);
+    --shell-border: rgba(255, 255, 255, 0.16);
+    --card-bg: rgba(255, 255, 255, 0.14);
+    --window-bg: rgba(248, 250, 252, 0.9);
+    --window-text: #0f172a;
+    --accent: #60a5fa;
+    --taskbar-bg: rgba(15, 23, 42, 0.8);
+    --shadow: 0 16px 40px rgba(15, 23, 42, 0.35);
+    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    min-height: 100vh;
+    background: var(--wallpaper);
+    color: var(--shell-text);
+}
+
+body[data-skin="apple"] {
+    --accent: #fb7185;
+    --taskbar-bg: rgba(45, 45, 45, 0.65);
+    --window-bg: rgba(255, 251, 235, 0.92);
+}
+
+body[data-skin="linux"] {
+    --accent: #f97316;
+    --taskbar-bg: rgba(17, 24, 39, 0.86);
+    --window-bg: rgba(249, 250, 251, 0.94);
+}
+
+.desktop-shell {
+    display: grid;
+    grid-template-columns: 320px minmax(0, 1fr);
+    min-height: 100vh;
+}
+
+.desktop-sidebar {
+    padding: 32px;
+    backdrop-filter: blur(20px);
+    background: linear-gradient(180deg, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.32));
+    border-right: 1px solid var(--shell-border);
+}
+
+.eyebrow {
+    margin: 0 0 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    font-size: 12px;
+    opacity: 0.72;
+}
+
+h1,
+h2,
+h3,
+p,
+ul {
+    margin-top: 0;
+}
+
+h1 {
+    font-size: 40px;
+    line-height: 1;
+    margin-bottom: 16px;
+}
+
+.lede {
+    max-width: 24rem;
+    font-size: 16px;
+    opacity: 0.88;
+}
+
+.panel {
+    margin-top: 24px;
+    padding: 18px;
+    border: 1px solid var(--shell-border);
+    background: var(--shell-panel);
+    border-radius: 18px;
+    box-shadow: var(--shadow);
+}
+
+.skin-switcher {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.skin-chip,
+.text-link {
+    color: inherit;
+    text-decoration: none;
+}
+
+.skin-chip {
+    display: inline-flex;
+    align-items: center;
+    padding: 10px 14px;
+    border-radius: 999px;
+    border: 1px solid var(--shell-border);
+    background: rgba(255, 255, 255, 0.06);
+}
+
+.skin-chip.is-active {
+    background: var(--accent);
+    color: #0f172a;
+    border-color: transparent;
+}
+
+.fact-list {
+    padding-left: 18px;
+    opacity: 0.9;
+}
+
+.desktop-stage {
+    position: relative;
+    overflow: hidden;
+    padding: 24px;
+}
+
+.desktop-icons {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+    gap: 16px;
+    width: min(720px, calc(100% - 80px));
+}
+
+.desktop-icon {
+    width: 96px;
+    padding: 12px 10px;
+    border: 1px solid transparent;
+    border-radius: 16px;
+    text-align: center;
+    background: rgba(255, 255, 255, 0.05);
+    cursor: pointer;
+    transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease;
+}
+
+.desktop-icon:hover {
+    transform: translateY(-2px);
+    background: rgba(255, 255, 255, 0.12);
+    border-color: var(--shell-border);
+}
+
+.desktop-icon-badge {
+    display: grid;
+    place-items: center;
+    width: 52px;
+    height: 52px;
+    margin: 0 auto 10px;
+    border-radius: 18px;
+    background: rgba(15, 23, 42, 0.6);
+    font-weight: 700;
+}
+
+.desktop-icon-label {
+    display: block;
+    font-size: 14px;
+}
+
+.widget-zone {
+    position: absolute;
+    top: 24px;
+    right: 24px;
+    display: grid;
+    gap: 14px;
+    width: min(320px, calc(100% - 48px));
+}
+
+.widget-card {
+    padding: 16px;
+    border-radius: 18px;
+    border: 1px solid var(--shell-border);
+    background: var(--card-bg);
+    backdrop-filter: blur(16px);
+    box-shadow: var(--shadow);
+}
+
+.window-layer {
+    position: absolute;
+    inset: 24px 24px 92px 24px;
+    pointer-events: none;
+}
+
+.window {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    border-radius: 20px;
+    overflow: hidden;
+    background: var(--window-bg);
+    color: var(--window-text);
+    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.3);
+    border: 1px solid rgba(148, 163, 184, 0.25);
+    pointer-events: auto;
+}
+
+.window.is-minimized {
+    display: none;
+}
+
+.window-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    background: rgba(255, 255, 255, 0.58);
+    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
+    cursor: move;
+}
+
+.window-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.window-action {
+    width: 12px;
+    height: 12px;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+    background: #cbd5e1;
+    cursor: pointer;
+}
+
+.window-action[data-action="close"] {
+    background: #ef4444;
+}
+
+.window-action[data-action="minimize"] {
+    background: #f59e0b;
+}
+
+.window-action[data-action="maximize"] {
+    background: #22c55e;
+}
+
+.window-content {
+    padding: 18px;
+    font-size: 15px;
+    line-height: 1.5;
+}
+
+.taskbar {
+    position: absolute;
+    left: 24px;
+    right: 24px;
+    bottom: 24px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 12px 16px;
+    border-radius: 22px;
+    background: var(--taskbar-bg);
+    backdrop-filter: blur(18px);
+    border: 1px solid var(--shell-border);
+}
+
+.start-button,
+.taskbar-app-button {
+    border: 0;
+    border-radius: 999px;
+    padding: 10px 14px;
+    background: rgba(255, 255, 255, 0.12);
+    color: inherit;
+    cursor: pointer;
+}
+
+.taskbar-apps {
+    display: flex;
+    gap: 10px;
+    flex: 1;
+    overflow: auto;
+}
+
+.tray {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    white-space: nowrap;
+}
+
+.tray-pill {
+    padding: 8px 10px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.08);
+    font-size: 13px;
+}
+
+@media (max-width: 1100px) {
+    .desktop-shell {
+        grid-template-columns: 1fr;
+    }
+
+    .desktop-sidebar {
+        border-right: 0;
+        border-bottom: 1px solid var(--shell-border);
+    }
+
+    .desktop-stage {
+        min-height: 70vh;
+        padding-bottom: 120px;
+    }
+
+    .widget-zone {
+        position: static;
+        width: 100%;
+        margin-top: 24px;
+    }
+
+    .window-layer {
+        position: static;
+        inset: auto;
+        margin-top: 24px;
+        display: grid;
+        gap: 18px;
+    }
+
+    .window {
+        position: relative;
+        width: 100% !important;
+        height: auto !important;
+        left: auto !important;
+        top: auto !important;
+    }
+}

public/assets/desktop/desktop.js

@@ -0,0 +1,189 @@
+const payloadNode = document.getElementById('desktop-payload');
+
+if (payloadNode) {
+    const payload = JSON.parse(payloadNode.textContent);
+    const iconsRoot = document.getElementById('desktop-icons');
+    const windowsRoot = document.getElementById('window-layer');
+    const taskbarRoot = document.getElementById('taskbar-apps');
+    const clockNode = document.getElementById('clock');
+    const windows = new Map();
+    let zIndex = 20;
+
+    const renderClock = () => {
+        if (!clockNode) {
+            return;
+        }
+
+        clockNode.textContent = new Intl.DateTimeFormat('de-DE', {
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+        }).format(new Date());
+    };
+
+    const focusWindow = (windowId) => {
+        windows.forEach((record) => {
+            record.node.classList.remove('is-focused');
+        });
+
+        const record = windows.get(windowId);
+        if (!record) {
+            return;
+        }
+
+        zIndex += 1;
+        record.node.style.zIndex = String(zIndex);
+        record.node.classList.add('is-focused');
+    };
+
+    const syncTaskbar = () => {
+        taskbarRoot.innerHTML = '';
+
+        windows.forEach((record) => {
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'taskbar-app-button';
+            button.textContent = record.title;
+            button.addEventListener('click', () => {
+                record.node.classList.toggle('is-minimized');
+                focusWindow(record.id);
+            });
+            taskbarRoot.appendChild(button);
+        });
+    };
+
+    const wireDragging = (record) => {
+        const header = record.node.querySelector('.window-header');
+        if (!header || window.matchMedia('(max-width: 1100px)').matches) {
+            return;
+        }
+
+        let startX = 0;
+        let startY = 0;
+        let originX = 0;
+        let originY = 0;
+        let dragging = false;
+
+        header.addEventListener('pointerdown', (event) => {
+            dragging = true;
+            startX = event.clientX;
+            startY = event.clientY;
+            originX = parseInt(record.node.style.left, 10);
+            originY = parseInt(record.node.style.top, 10);
+            header.setPointerCapture(event.pointerId);
+            focusWindow(record.id);
+        });
+
+        header.addEventListener('pointermove', (event) => {
+            if (!dragging) {
+                return;
+            }
+
+            record.node.style.left = `${originX + event.clientX - startX}px`;
+            record.node.style.top = `${originY + event.clientY - startY}px`;
+        });
+
+        header.addEventListener('pointerup', () => {
+            dragging = false;
+        });
+    };
+
+    const createWindow = (definition) => {
+        const node = document.createElement('article');
+        node.className = 'window';
+        node.style.left = `${definition.x}px`;
+        node.style.top = `${definition.y}px`;
+        node.style.width = `${definition.width}px`;
+        node.style.height = `${definition.height}px`;
+        node.innerHTML = `
+            <header class="window-header">
+                <strong>${definition.title}</strong>
+                <div class="window-actions">
+                    <button class="window-action" data-action="minimize" type="button" aria-label="Minimieren"></button>
+                    <button class="window-action" data-action="maximize" type="button" aria-label="Maximieren"></button>
+                    <button class="window-action" data-action="close" type="button" aria-label="Schliessen"></button>
+                </div>
+            </header>
+            <div class="window-content">
+                <p>${definition.content}</p>
+                <p><strong>Route:</strong> ${definition.app_id}</p>
+            </div>
+        `;
+
+        const record = {
+            id: definition.window_id,
+            title: definition.title,
+            node,
+            definition,
+        };
+
+        node.addEventListener('mousedown', () => focusWindow(record.id));
+
+        node.querySelectorAll('.window-action').forEach((action) => {
+            action.addEventListener('click', () => {
+                const actionName = action.dataset.action;
+                if (actionName === 'close') {
+                    windows.delete(record.id);
+                    node.remove();
+                    syncTaskbar();
+                    return;
+                }
+
+                if (actionName === 'minimize') {
+                    node.classList.toggle('is-minimized');
+                    syncTaskbar();
+                    return;
+                }
+
+                if (actionName === 'maximize') {
+                    node.style.left = '24px';
+                    node.style.top = '24px';
+                    node.style.width = 'calc(100% - 48px)';
+                    node.style.height = 'calc(100% - 48px)';
+                    focusWindow(record.id);
+                }
+            });
+        });
+
+        windows.set(record.id, record);
+        windowsRoot.appendChild(node);
+        wireDragging(record);
+        focusWindow(record.id);
+        syncTaskbar();
+    };
+
+    payload.apps.forEach((app) => {
+        const icon = document.createElement('button');
+        icon.type = 'button';
+        icon.className = 'desktop-icon';
+        icon.innerHTML = `
+            <span class="desktop-icon-badge">${app.icon}</span>
+            <span class="desktop-icon-label">${app.title}</span>
+        `;
+        icon.addEventListener('click', () => {
+            const existing = Array.from(windows.values()).find((record) => record.definition.app_id === app.app_id);
+
+            if (existing) {
+                existing.node.classList.remove('is-minimized');
+                focusWindow(existing.id);
+                return;
+            }
+
+            createWindow({
+                window_id: `window-${app.app_id}-${Date.now()}`,
+                app_id: app.app_id,
+                title: app.title,
+                x: 64 + Math.round(Math.random() * 80),
+                y: 70 + Math.round(Math.random() * 60),
+                width: app.default_width || 640,
+                height: app.default_height || 420,
+                content: app.summary || '',
+            });
+        });
+        iconsRoot.appendChild(icon);
+    });
+
+    payload.windows.forEach(createWindow);
+    renderClock();
+    window.setInterval(renderClock, 1000);
+}

public/index.php

@@ -0,0 +1,12 @@
+<?php
+
+declare(strict_types=1);
+
+require_once dirname(__DIR__) . '/src/App/bootstrap.php';
+
+use App\App;
+
+$app = new App(dirname(__DIR__));
+$desktopPayload = $app->desktopPayload();
+
+require dirname(__DIR__) . '/partials/desktop/shell.php';