feat: Implement initial application structure with network view and SVG editor

- Added network-view.js for visualizing network topology with devices and connections.
- Introduced svg-editor.js for managing ports on device types with drag-and-drop functionality.
- Created bootstrap.php for application initialization, including configuration and database connection.
- Established config.php for centralized configuration settings.
- Developed index.php as the main entry point with module-based routing.
- Integrated _sql.php for database abstraction.
- Added auth.php for single-user authentication handling.
- Included helpers.php for utility functions.
- Created modules for managing connections, device types, devices, and floors.
- Implemented database schema in init.sql for locations, buildings, floors, rooms, network outlets, devices, and connections.
- Added Docker support with docker-compose.yml for web and database services.
- Documented database structure and UI/UX concepts in respective markdown files.

app/.htaccess

@@ -0,0 +1,48 @@
+# =========================
+# Grundschutz
+# =========================
+
+# Kein Directory-Listing
+Options -Indexes
+
+# Schutz für sensible Dateien
+<FilesMatch "(\.env|\.git|config\.php|_sql\.php)">
+    Require all denied
+</FilesMatch>
+
+# TODO: ggf. weitere Dateien schützen, z.B. uploads oder tmp
+
+# =========================
+# Rewrite zu index.php
+# =========================
+RewriteEngine On
+
+# Alles auf index.php umleiten, außer echte Dateien/Verzeichnisse
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule ^(.*)$ index.php [QSA,L]
+
+# =========================
+# Standard-Dokument
+# =========================
+DirectoryIndex index.php
+
+# =========================
+# Security Headers
+# =========================
+<IfModule mod_headers.c>
+    Header set X-Content-Type-Options "nosniff"
+    Header set X-Frame-Options "SAMEORIGIN"
+    Header set X-XSS-Protection "1; mode=block"
+    Header always set Referrer-Policy "no-referrer-when-downgrade"
+    Header always set Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:;"
+</IfModule>
+
+# =========================
+# Upload-Sicherheit
+# =========================
+<FilesMatch "\.(php|phtml|php3|php4|php5|php7|phps)$">
+    Require all denied
+</FilesMatch>
+
+# TODO: Optional: Upload-Verzeichnisse (device_types, floorplans) via .htaccess zusätzlich schützen

app/api/connections.php

@@ -0,0 +1,2 @@
+<?php
+// API für Verbindungsdaten (Netzwerkansicht)

app/api/device_type_ports.php

@@ -0,0 +1,2 @@
+<?php
+// Laden und Speichern von Port-Punkten für den SVG-Port-Editor

app/api/upload.php

@@ -0,0 +1,2 @@
+<?php
+// Datei-Upload für Gerätebilder und SVGs

app/assets/css/app.css

@@ -0,0 +1 @@
+/* Zentrales Stylesheet (Layout, Farben, Komponenten) */

app/assets/js/app.js

@@ -0,0 +1 @@
+// Globale JS-Funktionen, Initialisierung

app/assets/js/network-view.js

@@ -0,0 +1,289 @@
+// Netzwerk-Graph-Ansicht (Nodes, Kanten, Filter)
+/**
+ * network-view.js
+ *
+ * Darstellung der Netzwerk-Topologie:
+ * - Geräte als Nodes
+ * - Ports als Ankerpunkte
+ * - Verbindungen als Linien
+ * - Freie / selbstdefinierte Verbindungstypen
+ *
+ * Kein Layout-Framework (kein D3, kein Cytoscape)
+ * -> bewusst simpel & erweiterbar
+ */
+
+/* =========================
+ * Konfiguration
+ * ========================= */
+
+// TODO: Standort / Rack / View-Kontext vom Backend setzen
+const CONTEXT_ID = null;
+
+// TODO: API-Endpunkte definieren
+const API_LOAD_NETWORK = '/api/network_view.php?action=load';
+const API_SAVE_POSITIONS = '/api/network_view.php?action=save_positions';
+
+/* =========================
+ * State
+ * ========================= */
+
+let svgElement = null;
+
+let devices = [];      // Geräte inkl. Position
+let connections = [];  // Verbindungen zwischen Ports
+
+let selectedDeviceId = null;
+let isDragging = false;
+let dragOffset = { x: 0, y: 0 };
+
+/* =========================
+ * Initialisierung
+ * ========================= */
+
+document.addEventListener('DOMContentLoaded', () => {
+    svgElement = document.querySelector('#network-svg');
+
+    if (!svgElement) {
+        console.warn('Network View: #network-svg nicht gefunden');
+        return;
+    }
+
+    bindSvgEvents();
+    loadNetwork();
+});
+
+/* =========================
+ * Events
+ * ========================= */
+
+function bindSvgEvents() {
+    svgElement.addEventListener('mousemove', onMouseMove);
+    svgElement.addEventListener('mouseup', onMouseUp);
+    svgElement.addEventListener('click', onSvgClick);
+}
+
+/* =========================
+ * Laden
+ * ========================= */
+
+function loadNetwork() {
+    if (!CONTEXT_ID) {
+        console.warn('CONTEXT_ID nicht gesetzt');
+        return;
+    }
+
+    fetch(`${API_LOAD_NETWORK}&context_id=${CONTEXT_ID}`)
+        .then(res => res.json())
+        .then(data => {
+            // TODO: Datenstruktur validieren
+            devices = data.devices || [];
+            connections = data.connections || [];
+
+            renderAll();
+        })
+        .catch(err => {
+            console.error('Fehler beim Laden der Netzwerkansicht', err);
+        });
+}
+
+/* =========================
+ * Rendering
+ * ========================= */
+
+function renderAll() {
+    clearSvg();
+
+    renderConnections();
+    renderDevices();
+}
+
+function clearSvg() {
+    while (svgElement.firstChild) {
+        svgElement.removeChild(svgElement.firstChild);
+    }
+}
+
+/* ---------- Geräte ---------- */
+
+function renderDevices() {
+    devices.forEach(device => renderDevice(device));
+}
+
+function renderDevice(device) {
+    const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    group.classList.add('device-node');
+    group.dataset.id = device.id;
+
+    group.setAttribute(
+        'transform',
+        `translate(${device.x || 0}, ${device.y || 0})`
+    );
+
+    // TODO: Gerätetyp (SVG oder JPG) korrekt laden
+    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    rect.setAttribute('width', 120);
+    rect.setAttribute('height', 60);
+    rect.setAttribute('rx', 6);
+
+    rect.addEventListener('mousedown', (e) => {
+        startDrag(e, device.id);
+        e.stopPropagation();
+    });
+
+    // Label
+    const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    text.setAttribute('x', 60);
+    text.setAttribute('y', 35);
+    text.setAttribute('text-anchor', 'middle');
+    text.textContent = device.name || 'Device';
+
+    group.appendChild(rect);
+    group.appendChild(text);
+
+    // TODO: Ports als kleine Kreise anlegen (Position aus Portdefinition)
+    // TODO: Ports klickbar machen (für Verbindungs-Erstellung)
+
+    svgElement.appendChild(group);
+}
+
+/* ---------- Verbindungen ---------- */
+
+function renderConnections() {
+    connections.forEach(conn => renderConnection(conn));
+}
+
+function renderConnection(connection) {
+    // TODO: Quell- & Ziel-Port-Koordinaten berechnen
+    // TODO: unterschiedliche Verbindungstypen (Farbe, Strichart, Dicke)
+
+    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+
+    line.setAttribute('x1', 0);
+    line.setAttribute('y1', 0);
+    line.setAttribute('x2', 100);
+    line.setAttribute('y2', 100);
+
+    line.classList.add('connection-line');
+
+    svgElement.appendChild(line);
+}
+
+/* =========================
+ * Interaktion
+ * ========================= */
+
+function onSvgClick(event) {
+    // Klick ins Leere -> Auswahl aufheben
+    if (event.target === svgElement) {
+        selectedDeviceId = null;
+        updateSelection();
+    }
+}
+
+function startDrag(event, deviceId) {
+    const device = getDeviceById(deviceId);
+    if (!device) return;
+
+    isDragging = true;
+    selectedDeviceId = deviceId;
+
+    const point = getSvgCoordinates(event);
+    dragOffset.x = (device.x || 0) - point.x;
+    dragOffset.y = (device.y || 0) - point.y;
+
+    updateSelection();
+}
+
+function onMouseMove(event) {
+    if (!isDragging || !selectedDeviceId) return;
+
+    const device = getDeviceById(selectedDeviceId);
+    if (!device) return;
+
+    const point = getSvgCoordinates(event);
+
+    device.x = point.x + dragOffset.x;
+    device.y = point.y + dragOffset.y;
+
+    renderAll();
+}
+
+function onMouseUp() {
+    if (!isDragging) return;
+
+    isDragging = false;
+
+    // TODO: Positionen optional automatisch speichern
+}
+
+/* =========================
+ * Auswahl
+ * ========================= */
+
+function updateSelection() {
+    svgElement.querySelectorAll('.device-node').forEach(el => {
+        el.classList.toggle(
+            'selected',
+            el.dataset.id === String(selectedDeviceId)
+        );
+    });
+
+    // TODO: Sidebar mit Gerätedetails füllen
+}
+
+/* =========================
+ * Speichern
+ * ========================= */
+
+function savePositions() {
+    fetch(API_SAVE_POSITIONS, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+            context_id: CONTEXT_ID,
+            devices: devices.map(d => ({
+                id: d.id,
+                x: d.x,
+                y: d.y
+            }))
+        })
+    })
+    .then(res => res.json())
+    .then(data => {
+        // TODO: Erfolg / Fehler anzeigen
+        console.log('Positionen gespeichert', data);
+    })
+    .catch(err => {
+        console.error('Fehler beim Speichern', err);
+    });
+}
+
+/* =========================
+ * Hilfsfunktionen
+ * ========================= */
+
+function getSvgCoordinates(event) {
+    const pt = svgElement.createSVGPoint();
+    pt.x = event.clientX;
+    pt.y = event.clientY;
+
+    const transformed = pt.matrixTransform(svgElement.getScreenCTM().inverse());
+    return { x: transformed.x, y: transformed.y };
+}
+
+function getDeviceById(id) {
+    return devices.find(d => d.id === id);
+}
+
+/* =========================
+ * Keyboard Shortcuts
+ * ========================= */
+
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+        selectedDeviceId = null;
+        updateSelection();
+    }
+
+    // TODO: Delete -> Gerät entfernen?
+});

app/assets/js/svg-editor.js

@@ -0,0 +1,258 @@
+// Logik für den SVG-Port-Editor (Klicks, Drag & Drop, Speichern)
+/**
+ * svg-editor.js
+ *
+ * Logik für den SVG-Port-Editor:
+ * - Ports per Klick anlegen
+ * - Ports auswählen
+ * - Ports verschieben (Drag & Drop)
+ * - Ports löschen
+ * - Ports laden / speichern
+ *
+ * Abhängigkeiten: keine (Vanilla JS)
+ */
+
+/* =========================
+ * Konfiguration
+ * ========================= */
+
+// TODO: vom Backend setzen (z. B. via data-Attribut)
+const DEVICE_TYPE_ID = null;
+
+// TODO: API-Endpunkte festlegen
+const API_LOAD_PORTS = '/api/device_type_ports.php?action=load';
+const API_SAVE_PORTS = '/api/device_type_ports.php?action=save';
+
+/* =========================
+ * State
+ * ========================= */
+
+let svgElement = null;
+let ports = [];
+let selectedPortId = null;
+let isDragging = false;
+let dragOffset = { x: 0, y: 0 };
+
+/* =========================
+ * Initialisierung
+ * ========================= */
+
+document.addEventListener('DOMContentLoaded', () => {
+    svgElement = document.querySelector('#device-svg');
+
+    if (!svgElement) {
+        console.warn('SVG Editor: #device-svg nicht gefunden');
+        return;
+    }
+
+    bindSvgEvents();
+    loadPorts();
+});
+
+/* =========================
+ * SVG Events
+ * ========================= */
+
+function bindSvgEvents() {
+    svgElement.addEventListener('click', onSvgClick);
+    svgElement.addEventListener('mousemove', onSvgMouseMove);
+    svgElement.addEventListener('mouseup', onSvgMouseUp);
+}
+
+/* =========================
+ * Port-Erstellung
+ * ========================= */
+
+function onSvgClick(event) {
+    // Klick auf bestehenden Port?
+    if (event.target.classList.contains('port-point')) {
+        selectPort(event.target.dataset.id);
+        return;
+    }
+
+    // TODO: Modifier-Key prüfen (z. B. nur mit SHIFT neuen Port erstellen?)
+    const point = getSvgCoordinates(event);
+
+    createPort(point.x, point.y);
+}
+
+function createPort(x, y) {
+    const id = generateTempId();
+
+    const port = {
+        id: id,
+        name: `Port ${ports.length + 1}`,
+        port_type_id: null, // TODO: Default-Porttyp?
+        x: x,
+        y: y,
+        comment: ''
+    };
+
+    ports.push(port);
+    renderPort(port);
+    selectPort(id);
+}
+
+/* =========================
+ * Rendering
+ * ========================= */
+
+function renderPort(port) {
+    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+
+    circle.setAttribute('cx', port.x);
+    circle.setAttribute('cy', port.y);
+    circle.setAttribute('r', 6);
+    circle.classList.add('port-point');
+    circle.dataset.id = port.id;
+
+    circle.addEventListener('mousedown', (e) => {
+        startDrag(e, port.id);
+        e.stopPropagation();
+    });
+
+    svgElement.appendChild(circle);
+}
+
+function rerenderPorts() {
+    svgElement.querySelectorAll('.port-point').forEach(p => p.remove());
+    ports.forEach(renderPort);
+}
+
+/* =========================
+ * Auswahl
+ * ========================= */
+
+function selectPort(id) {
+    selectedPortId = id;
+
+    document.querySelectorAll('.port-point').forEach(el => {
+        el.classList.toggle('selected', el.dataset.id === id);
+    });
+
+    // TODO: Sidebar-Felder mit Portdaten füllen
+}
+
+/* =========================
+ * Drag & Drop
+ * ========================= */
+
+function startDrag(event, portId) {
+    const port = getPortById(portId);
+    if (!port) return;
+
+    isDragging = true;
+    selectedPortId = portId;
+
+    const point = getSvgCoordinates(event);
+    dragOffset.x = port.x - point.x;
+    dragOffset.y = port.y - point.y;
+}
+
+function onSvgMouseMove(event) {
+    if (!isDragging || !selectedPortId) return;
+
+    const port = getPortById(selectedPortId);
+    if (!port) return;
+
+    const point = getSvgCoordinates(event);
+
+    port.x = point.x + dragOffset.x;
+    port.y = point.y + dragOffset.y;
+
+    rerenderPorts();
+}
+
+function onSvgMouseUp() {
+    isDragging = false;
+}
+
+/* =========================
+ * Löschen
+ * ========================= */
+
+function deleteSelectedPort() {
+    if (!selectedPortId) return;
+
+    // TODO: Sicherheitsabfrage (confirm)
+    ports = ports.filter(p => p.id !== selectedPortId);
+    selectedPortId = null;
+
+    rerenderPorts();
+
+    // TODO: Sidebar zurücksetzen
+}
+
+/* =========================
+ * Laden / Speichern
+ * ========================= */
+
+function loadPorts() {
+    if (!DEVICE_TYPE_ID) {
+        console.warn('DEVICE_TYPE_ID nicht gesetzt');
+        return;
+    }
+
+    fetch(`${API_LOAD_PORTS}&device_type_id=${DEVICE_TYPE_ID}`)
+        .then(res => res.json())
+        .then(data => {
+            // TODO: Datenformat validieren
+            ports = data;
+            rerenderPorts();
+        })
+        .catch(err => {
+            console.error('Fehler beim Laden der Ports', err);
+        });
+}
+
+function savePorts() {
+    if (!DEVICE_TYPE_ID) return;
+
+    fetch(API_SAVE_PORTS, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+            device_type_id: DEVICE_TYPE_ID,
+            ports: ports
+        })
+    })
+    .then(res => res.json())
+    .then(data => {
+        // TODO: Erfolg / Fehler anzeigen
+        console.log('Ports gespeichert', data);
+    })
+    .catch(err => {
+        console.error('Fehler beim Speichern', err);
+    });
+}
+
+/* =========================
+ * Hilfsfunktionen
+ * ========================= */
+
+function getSvgCoordinates(event) {
+    const pt = svgElement.createSVGPoint();
+    pt.x = event.clientX;
+    pt.y = event.clientY;
+
+    const transformed = pt.matrixTransform(svgElement.getScreenCTM().inverse());
+    return { x: transformed.x, y: transformed.y };
+}
+
+function getPortById(id) {
+    return ports.find(p => p.id === id);
+}
+
+function generateTempId() {
+    return 'tmp_' + Math.random().toString(36).substr(2, 9);
+}
+
+/* =========================
+ * Keyboard Shortcuts
+ * ========================= */
+
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Delete') {
+        deleteSelectedPort();
+    }
+});

app/bootstrap.php

@@ -0,0 +1,48 @@
+<?php
+/**
+ * bootstrap.php
+ *
+ * Initialisierung der Anwendung
+ * - Config laden
+ * - Session starten
+ * - DB-Verbindung über _sql.php
+ * - Helper einbinden
+ */
+
+/* =========================
+ * Config laden
+ * ========================= */
+require_once __DIR__ . '/config.php';
+// TODO: Config-Datei mit DB-Zugang, Pfaden, globalen Settings füllen
+
+/* =========================
+ * Session starten
+ * ========================= */
+session_start();
+// TODO: Single-User Auth prüfen
+// z.B. $_SESSION['user'] setzen oder Login erzwingen
+
+/* =========================
+ * DB-Verbindung initialisieren
+ * ========================= */
+require_once __DIR__ . '/lib/_sql.php';
+
+// TODO: Host, User, Passwort, DB aus config.php nutzen
+$sql = new SQL(
+    DB_HOST,      // z.B. localhost
+    DB_USER,      // z.B. netdoc
+    DB_PASSWORD,  // z.B. netdoc
+    DB_NAME       // z.B. netdoc
+);
+
+/* =========================
+ * Helper laden
+ * ========================= */
+require_once __DIR__ . '/lib/helpers.php';
+// TODO: Globale Funktionen: escape, redirect, flash messages, etc.
+
+/* =========================
+ * Optional: Fehlerbehandlung
+ * ========================= */
+// error_reporting(E_ALL);
+// ini_set('display_errors', 1);

app/config.php

@@ -0,0 +1,2 @@
+<?php
+// Zentrale Konfiguration (DB-Zugangsdaten, Pfade, globale Settings)

app/index.php

@@ -0,0 +1,67 @@
+<?php
+// Einstiegspunkt der Anwendung, Routing zur jeweiligen Modul-Seite
+
+
+/**
+ * index.php
+ *
+ * Einstiegspunkt der Anwendung
+ * - Single-User
+ * - Modulbasiertes Routing
+ * - Basierend auf _sql.php
+ * - HTML-Layout via templates/layout.php
+ */
+
+/* =========================
+ * Bootstrap
+ * ========================= */
+require_once __DIR__ . '/bootstrap.php'; // lädt config, DB, helper
+// TODO: Session starten / Single-User-Auth prüfen
+
+/* =========================
+ * Routing
+ * ========================= */
+
+// Standard-Modul / Aktion
+$module = $_GET['module'] ?? 'dashboard';
+$action = $_GET['action'] ?? 'list';
+
+// Whitelist der Module
+$validModules = ['dashboard', 'device_types', 'devices', 'racks', 'floors', 'connections'];
+
+// Whitelist der Aktionen
+$validActions = ['list', 'edit', 'save', 'ports'];
+
+// Prüfen auf gültige Werte
+if (!in_array($module, $validModules)) {
+    // TODO: Fehlerseite anzeigen
+    die('Ungültiges Modul');
+}
+
+if (!in_array($action, $validActions)) {
+    // TODO: Fehlerseite anzeigen
+    die('Ungültige Aktion');
+}
+
+/* =========================
+ * Template-Header laden
+ * ========================= */
+require_once __DIR__ . '/templates/header.php';
+// TODO: ggf. Navigation einbinden
+
+/* =========================
+ * Modul laden
+ * ========================= */
+$modulePath = __DIR__ . "/modules/$module/$action.php";
+
+if (file_exists($modulePath)) {
+    require_once $modulePath;
+} else {
+    // TODO: Fehlerseite oder 404
+    echo "<p>Die Seite existiert noch nicht.</p>";
+}
+
+/* =========================
+ * Template-Footer laden
+ * ========================= */
+require_once __DIR__ . '/templates/footer.php';

app/lib/_sql.php

@@ -0,0 +1,2 @@
+<?php
+// Datenbank-Abstraktionsklasse (bereits vorhanden, hier eingebunden)

app/lib/auth.php

@@ -0,0 +1,2 @@
+<?php
+// Single-User-Authentifizierung (Login, Session-Handling)

app/lib/helpers.php

@@ -0,0 +1,2 @@
+<?php
+// Hilfsfunktionen (Escaping, Redirects, Formatierungen)

app/modules/connections/list.php

@@ -0,0 +1,2 @@
+<?php
+// Anzeige aller Verbindungen (Filter, Übersicht)

app/modules/connections/save.php

@@ -0,0 +1,2 @@
+<?php
+// Verbindung anlegen oder ändern

app/modules/device_types/edit.php

@@ -0,0 +1,2 @@
+<?php
+// Gerätetyp anlegen oder bearbeiten (Formular)

app/modules/device_types/list.php

@@ -0,0 +1,2 @@
+<?php
+// Liste aller Gerätetypen anzeigen

app/modules/device_types/ports.php

@@ -0,0 +1,2 @@
+<?php
+// SVG-Port-Editor für einen Gerätetyp

app/modules/device_types/save.php

@@ -0,0 +1,2 @@
+<?php
+// Gerätetyp speichern (INSERT / UPDATE)

app/modules/devices/edit.php

@@ -0,0 +1,2 @@
+<?php
+// Gerät anlegen oder bearbeiten

app/modules/devices/list.php

@@ -0,0 +1,2 @@
+<?php
+// Liste aller Geräte anzeigen

app/modules/devices/save.php

@@ -0,0 +1,2 @@
+<?php
+// Gerät speichern (Rack-Position, Typ, Name)

app/modules/floors/edit.php

@@ -0,0 +1,2 @@
+<?php
+// Stockwerk bearbeiten inkl. SVG-Plan

app/modules/floors/list.php

@@ -0,0 +1,2 @@
+<?php
+// Übersicht aller Stockwerke

app/modules/racks/edit.php

@@ -0,0 +1,2 @@
+<?php
+// Rack anlegen oder bearbeiten

app/modules/racks/list.php

@@ -0,0 +1,2 @@
+<?php
+// Übersicht aller Racks

app/templates/footer.php

@@ -0,0 +1,19 @@
+<?php
+/**
+ * footer.php
+ *
+ * HTML-Footer, Scripts, evtl. Modale oder Notifications
+ * Wird am Ende jeder Seite eingebunden
+ */
+?>
+</main>
+
+<footer>
+    <p>&copy; <?php echo date('Y'); ?> Meine Firma - Netzwerk Dokumentation</p>
+
+    <!-- TODO: Optional: Statusanzeige, Debug-Info, Session-Hinweis -->
+</footer>
+
+<!-- TODO: evtl. JS für modale Fenster oder Flash Messages -->
+</body>
+</html>

app/templates/header.php

@@ -0,0 +1,33 @@
+<?php
+/**
+ * header.php
+ *
+ * HTML-Kopf, CSS / JS einbinden, Navigation
+ * Wird am Anfang jeder Seite eingebunden
+ */
+?>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <title>Netzwerk-Dokumentation</title>
+
+    <!-- CSS -->
+    <link rel="stylesheet" href="/assets/css/app.css">
+
+    <!-- JS -->
+    <script src="/assets/js/app.js" defer></script>
+    <script src="/assets/js/svg-editor.js" defer></script>
+    <script src="/assets/js/network-view.js" defer></script>
+
+    <!-- TODO: Meta-Tags, Favicon -->
+</head>
+<body>
+<header>
+    <h1>Netzwerk-Dokumentation</h1>
+
+    <!-- TODO: Navigation einfügen -->
+    <!-- Beispiel: Links zu Dashboard, Gerätetypen, Geräte, Racks, Floors, Connections -->
+</header>
+
+<main>

app/templates/layout.php

@@ -0,0 +1,28 @@
+<?php
+/**
+ * layout.php
+ *
+ * Grundlayout: Header + Content + Footer
+ * Kann als Basis-Template dienen, falls Module HTML ausgeben
+ *
+ * Beispiel-Aufruf in Modul:
+ *   include __DIR__ . '/../templates/layout.php';
+ *
+ * TODO: In Zukunft: zentrales Template-System (z.B. mit $content)
+ */
+?>
+
+<?php include __DIR__ . '/header.php'; ?>
+
+<div class="content-wrapper">
+    <!-- TODO: Dynamischen Content hier einfügen -->
+    <?php
+    if (isset($content)) {
+        echo $content;
+    } else {
+        echo "<p>Inhalt fehlt</p>";
+    }
+    ?>
+</div>
+
+<?php include __DIR__ . '/footer.php'; ?>

app/uploads/device_types/.keep

@@ -0,0 +1 @@
+# Upload-Verzeichnis für Gerätebilder

app/uploads/floorplans/.keep

@@ -0,0 +1 @@
+# Upload-Verzeichnis für Stockwerks-SVGs