1134 lines
100 KiB
HTML
1134 lines
100 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="de" data-theme="light">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>web-cad – Festsaal Stuttgart</title>
|
|||
|
|
<meta name="description" content="Web-basiertes 2D-CAD für Event-Bestuhlungspläne">
|
|||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|||
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
|||
|
|
<link rel="stylesheet" href="assets/styles.css">
|
|||
|
|
<link rel="stylesheet" href="assets/layout.css">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<a href="#canvas-area" class="skip-link">Zum Hauptbereich springen</a>
|
|||
|
|
|
|||
|
|
<div class="app" id="app">
|
|||
|
|
|
|||
|
|
<!-- ==================== TOPBAR ==================== -->
|
|||
|
|
<header class="topbar" role="banner">
|
|||
|
|
<div class="topbar-left">
|
|||
|
|
<button class="hamburger-btn" id="hamburger-btn" aria-label="Werkzeuge öffnen">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
|
|||
|
|
</button>
|
|||
|
|
<div class="app-logo" aria-hidden="true">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h18v18H3z"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
|
|||
|
|
</div>
|
|||
|
|
<span class="app-name">web-cad</span>
|
|||
|
|
<span style="color: var(--color-border-strong); margin: 0 4px;">|</span>
|
|||
|
|
<button class="project-name" aria-label="Projekt wechseln">
|
|||
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
|
|||
|
|
<span>Festsaal Stuttgart</span>
|
|||
|
|
<svg class="caret" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>
|
|||
|
|
</button>
|
|||
|
|
<span class="saved-badge" aria-label="Status: Alle Änderungen gespeichert">Gespeichert</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="topbar-right">
|
|||
|
|
<button class="icon-btn-top" aria-label="Rückgängig (Strg+Z)" title="Rückgängig (Strg+Z)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-15-6.7L3 13"/></svg>
|
|||
|
|
</button>
|
|||
|
|
<button class="icon-btn-top" aria-label="Wiederherstellen (Strg+Y)" title="Wiederherstellen (Strg+Y)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 15-6.7L21 13"/></svg>
|
|||
|
|
</button>
|
|||
|
|
<span style="width: 1px; height: 20px; background: var(--color-border); margin: 0 4px;"></span>
|
|||
|
|
<button class="icon-btn-top" aria-label="Versionen" title="Versionsverlauf">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
|||
|
|
</button>
|
|||
|
|
<button class="icon-btn-top" aria-label="Teilen" title="Projekt teilen">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
|
|||
|
|
</button>
|
|||
|
|
<span style="width: 1px; height: 20px; background: var(--color-border); margin: 0 4px;"></span>
|
|||
|
|
<button class="icon-btn-top" id="theme-toggle" aria-label="Hell/Dunkel umschalten" title="Theme wechseln">
|
|||
|
|
<svg id="theme-icon-light" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
|
|||
|
|
</button>
|
|||
|
|
<button class="icon-btn-top" aria-label="Hilfe" title="Hilfe (F1)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
|||
|
|
</button>
|
|||
|
|
<span style="width: 1px; height: 20px; background: var(--color-border); margin: 0 4px;"></span>
|
|||
|
|
<select class="lang-select" aria-label="Sprache wählen">
|
|||
|
|
<option value="de" selected>DE</option>
|
|||
|
|
<option value="en">EN</option>
|
|||
|
|
</select>
|
|||
|
|
<button class="icon-btn-top" aria-label="Benachrichtigungen" title="Benachrichtigungen">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
|
|||
|
|
</button>
|
|||
|
|
<div class="avatar" aria-label="Benutzer Leopold M." title="Leopold M.">LM</div>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<!-- ==================== RIBBON ==================== -->
|
|||
|
|
<nav class="ribbon" role="navigation" aria-label="Hauptwerkzeuge">
|
|||
|
|
<div class="ribbon-tabs" role="tablist">
|
|||
|
|
<button class="ribbon-tab active" role="tab" aria-selected="true" data-tab="start">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
|
|||
|
|
<span>Start</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="ribbon-tab" role="tab" data-tab="insert">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
|
|||
|
|
<span>Einfügen</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="ribbon-tab" role="tab" data-tab="format">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7V4h16v3"/><path d="M9 20h6"/><path d="M12 4v16"/></svg>
|
|||
|
|
<span>Format</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="ribbon-tab" role="tab" data-tab="view">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg>
|
|||
|
|
<span>Ansicht</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="ribbon-tab" role="tab" data-tab="tools">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
|
|||
|
|
<span>Extras</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="ribbon-tab" role="tab" data-tab="ki" style="color: var(--color-ki);">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
|
|||
|
|
<span>KI</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="ribbon-content" id="ribbon-content">
|
|||
|
|
<!-- Start tab: Datei / Bearbeiten -->
|
|||
|
|
<div class="ribbon-group compact-mobile" data-ribbon-group="start">
|
|||
|
|
<div class="ribbon-group-btns">
|
|||
|
|
<button class="ribbon-btn" title="Neues Projekt (Strg+N)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="15" x2="15" y2="15"/></svg>
|
|||
|
|
<span>Neu</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="ribbon-btn" title="Öffnen (Strg+O)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
|
|||
|
|
<span>Öffnen</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="ribbon-btn" title="Speichern (Strg+S)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
|
|||
|
|
<span>Speichern</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="ribbon-group-label">Datei</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="ribbon-divider"></div>
|
|||
|
|
|
|||
|
|
<div class="ribbon-group">
|
|||
|
|
<div class="ribbon-group-btns">
|
|||
|
|
<button class="ribbon-btn" title="Rückgängig (Strg+Z)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-15-6.7L3 13"/></svg>
|
|||
|
|
<span>Undo</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="ribbon-btn" title="Wiederherstellen (Strg+Y)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 15-6.7L21 13"/></svg>
|
|||
|
|
<span>Redo</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="ribbon-btn" title="Kopieren (Strg+C)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
|||
|
|
<span>Kopieren</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="ribbon-btn" title="Einfügen (Strg+V)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1"/></svg>
|
|||
|
|
<span>Einfügen</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="ribbon-group-label">Bearbeiten</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="ribbon-divider"></div>
|
|||
|
|
|
|||
|
|
<div class="ribbon-group">
|
|||
|
|
<div class="ribbon-group-btns">
|
|||
|
|
<button class="ribbon-btn" title="Zoom anpassen (F)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><line x1="7" y1="12" x2="17" y2="12"/></svg>
|
|||
|
|
<span>Zoom Fit</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="ribbon-btn" title="100% (1:1)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
|
|||
|
|
<span>100%</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="ribbon-btn" title="Grid ein/aus (F7)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="0"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/></svg>
|
|||
|
|
<span>Grid</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="ribbon-btn" title="Layer-Manager">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>
|
|||
|
|
<span>Layer</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="ribbon-group-label">Ansicht</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="ribbon-divider"></div>
|
|||
|
|
|
|||
|
|
<div class="ribbon-group">
|
|||
|
|
<div class="ribbon-group-btns">
|
|||
|
|
<button class="ribbon-btn" title="Messwerkzeug">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.3 8.7 8.7 21.3a1 1 0 0 1-1.4 0L2.7 16.7a1 1 0 0 1 0-1.4L15.3 2.7a1 1 0 0 1 1.4 0l4.6 4.6a1 1 0 0 1 0 1.4z"/><path d="m7.5 10.5 2 2"/><path d="m10.5 7.5 2 2"/><path d="m13.5 4.5 2 2"/><path d="m4.5 13.5 2 2"/></svg>
|
|||
|
|
<span>Messen</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="ribbon-btn" title="Suchen (Strg+F)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
|||
|
|
<span>Suchen</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="ribbon-btn" style="color: var(--color-ki);" title="KI Copilot (Ctrl+K)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
|
|||
|
|
<span>KI</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="ribbon-btn" title="Plugins">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v6m0 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/><path d="M12 8a6 6 0 0 0-6 6c0 3 2 4 2 6h8c0-2 2-3 2-6a6 6 0 0 0-6-6z"/></svg>
|
|||
|
|
<span>Plugins</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="ribbon-group-label">Extras</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
<!-- ==================== MAIN ==================== -->
|
|||
|
|
<main class="main" role="main">
|
|||
|
|
|
|||
|
|
<!-- LEFT SIDEBAR (Tool palette 2-col) -->
|
|||
|
|
<aside class="leftbar" aria-label="Werkzeugpalette">
|
|||
|
|
<div class="leftbar-header">
|
|||
|
|
<span class="leftbar-title">Werkzeuge</span>
|
|||
|
|
<button class="leftbar-toggle" id="leftbar-toggle" aria-label="Linke Leiste ausblenden">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="tool-section">
|
|||
|
|
<div class="tool-section-label">Auswählen / Anzeigen</div>
|
|||
|
|
<div class="tool-grid">
|
|||
|
|
<button class="tool-btn active" data-tool="select" title="Auswählen (V)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m3 3 7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/><path d="m13 13 6 6"/></svg>
|
|||
|
|
<span class="tool-btn-label">Auswahl</span>
|
|||
|
|
<span class="tool-btn-kbd">V</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="tool-btn" data-tool="pan" title="Pan (P / Leertaste)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M18 11V6a2 2 0 0 0-2-2 2 2 0 0 0-2 2"/><path d="M14 10V4a2 2 0 0 0-2-2 2 2 0 0 0-2 2v2"/><path d="M10 10.5V6a2 2 0 0 0-2-2 2 2 0 0 0-2 2v8"/><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/></svg>
|
|||
|
|
<span class="tool-btn-label">Pan</span>
|
|||
|
|
<span class="tool-btn-kbd">P</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="tool-btn" data-tool="zoom-win" title="Zoom-Fenster (Z)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><line x1="7" y1="12" x2="17" y2="12"/></svg>
|
|||
|
|
<span class="tool-btn-label">Zoom</span>
|
|||
|
|
<span class="tool-btn-kbd">Z</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="tool-btn" data-tool="measure" title="Messen">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.3 8.7 8.7 21.3a1 1 0 0 1-1.4 0L2.7 16.7a1 1 0 0 1 0-1.4L15.3 2.7a1 1 0 0 1 1.4 0l4.6 4.6a1 1 0 0 1 0 1.4z"/><path d="m7.5 10.5 2 2"/><path d="m10.5 7.5 2 2"/></svg>
|
|||
|
|
<span class="tool-btn-label">Messen</span>
|
|||
|
|
<span class="tool-btn-kbd">M</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="tool-section">
|
|||
|
|
<div class="tool-section-label">Zeichnen</div>
|
|||
|
|
<div class="tool-grid">
|
|||
|
|
<button class="tool-btn" data-tool="line" title="Linie (L)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="19" x2="19" y2="5"/></svg>
|
|||
|
|
<span class="tool-btn-label">Linie</span>
|
|||
|
|
<span class="tool-btn-kbd">L</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="tool-btn" data-tool="polyline" title="Polylinie (PL)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 14 15 20 7"/></svg>
|
|||
|
|
<span class="tool-btn-label">Polylinie</span>
|
|||
|
|
<span class="tool-btn-kbd">PL</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="tool-btn" data-tool="rect" title="Rechteck (REC)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="1"/></svg>
|
|||
|
|
<span class="tool-btn-label">Rechteck</span>
|
|||
|
|
<span class="tool-btn-kbd">REC</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="tool-btn" data-tool="circle" title="Kreis (C)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/></svg>
|
|||
|
|
<span class="tool-btn-label">Kreis</span>
|
|||
|
|
<span class="tool-btn-kbd">C</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="tool-btn" data-tool="arc" title="Bogen (A)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/><path d="M3 12a9 9 0 0 1 9-9"/></svg>
|
|||
|
|
<span class="tool-btn-label">Bogen</span>
|
|||
|
|
<span class="tool-btn-kbd">A</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="tool-btn" data-tool="text" title="Text (T)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg>
|
|||
|
|
<span class="tool-btn-label">Text</span>
|
|||
|
|
<span class="tool-btn-kbd">T</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="tool-btn" data-tool="dim" title="Bemaßung (DIM)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 3H3l3 18 3-9 6 9 3-9 3 9 3-18z"/><line x1="3" y1="3" x2="21" y2="21"/></svg>
|
|||
|
|
<span class="tool-btn-label">Bemaßung</span>
|
|||
|
|
<span class="tool-btn-kbd">DIM</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="tool-btn" data-tool="hatch" title="Schraffur (H)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="0"/><line x1="3" y1="9" x2="9" y2="3"/><line x1="9" y1="21" x2="21" y2="9"/><line x1="15" y1="21" x2="21" y2="15"/></svg>
|
|||
|
|
<span class="tool-btn-label">Schraffur</span>
|
|||
|
|
<span class="tool-btn-kbd">H</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="tool-section">
|
|||
|
|
<div class="tool-section-label">Bearbeiten</div>
|
|||
|
|
<div class="tool-grid">
|
|||
|
|
<button class="tool-btn" data-tool="move" title="Verschieben (M)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="5 9 2 12 5 15"/><polyline points="9 5 12 2 15 5"/><polyline points="15 19 12 22 9 19"/><polyline points="19 9 22 12 19 15"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="12" y1="2" x2="12" y2="22"/></svg>
|
|||
|
|
<span class="tool-btn-label">Move</span>
|
|||
|
|
<span class="tool-btn-kbd">M</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="tool-btn" data-tool="copy" title="Kopieren (CO)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
|||
|
|
<span class="tool-btn-label">Copy</span>
|
|||
|
|
<span class="tool-btn-kbd">CO</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="tool-btn" data-tool="rotate" title="Rotieren (RO)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
|
|||
|
|
<span class="tool-btn-label">Rotate</span>
|
|||
|
|
<span class="tool-btn-kbd">RO</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="tool-btn" data-tool="scale" title="Skalieren (SC)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
|
|||
|
|
<span class="tool-btn-label">Scale</span>
|
|||
|
|
<span class="tool-btn-kbd">SC</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="tool-btn" data-tool="mirror" title="Spiegeln (MI)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18"/><path d="M5 8l5-5 5 5"/><path d="M5 16l5 5 5-5"/></svg>
|
|||
|
|
<span class="tool-btn-label">Mirror</span>
|
|||
|
|
<span class="tool-btn-kbd">MI</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="tool-btn" data-tool="trim" title="Trimmen (TR)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><line x1="20" y1="4" x2="8.12" y2="15.88"/><line x1="14.47" y1="14.48" x2="20" y2="20"/><line x1="8.12" y1="8.12" x2="12" y2="12"/></svg>
|
|||
|
|
<span class="tool-btn-label">Trim</span>
|
|||
|
|
<span class="tool-btn-kbd">TR</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="tool-btn" data-tool="offset" title="Versatz (O)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h12"/><path d="M3 12h18"/><path d="M3 18h12"/><path d="M21 6v12"/></svg>
|
|||
|
|
<span class="tool-btn-label">Offset</span>
|
|||
|
|
<span class="tool-btn-kbd">O</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="tool-btn" data-tool="erase" title="Löschen (E)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
|
|||
|
|
<span class="tool-btn-label">Löschen</span>
|
|||
|
|
<span class="tool-btn-kbd">E</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="tool-section">
|
|||
|
|
<div class="tool-section-label">Bestuhlung</div>
|
|||
|
|
<div class="tool-grid">
|
|||
|
|
<button class="tool-btn" data-tool="row-seat" title="Reihen-Bestuhlung">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="4" height="3" rx="0.5"/><rect x="10" y="5" width="4" height="3" rx="0.5"/><rect x="17" y="5" width="4" height="3" rx="0.5"/><rect x="3" y="11" width="4" height="3" rx="0.5"/><rect x="10" y="11" width="4" height="3" rx="0.5"/><rect x="17" y="11" width="4" height="3" rx="0.5"/><rect x="3" y="17" width="4" height="3" rx="0.5"/><rect x="10" y="17" width="4" height="3" rx="0.5"/><rect x="17" y="17" width="4" height="3" rx="0.5"/></svg>
|
|||
|
|
<span class="tool-btn-label">Reihe</span>
|
|||
|
|
<span class="tool-btn-kbd">R</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="tool-btn" data-tool="block-seat" title="Block-Bestuhlung">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="1"/><rect x="6" y="6" width="3" height="3"/><rect x="10.5" y="6" width="3" height="3"/><rect x="15" y="6" width="3" height="3"/><rect x="6" y="10.5" width="3" height="3"/><rect x="10.5" y="10.5" width="3" height="3"/><rect x="15" y="10.5" width="3" height="3"/><rect x="6" y="15" width="3" height="3"/><rect x="10.5" y="15" width="3" height="3"/><rect x="15" y="15" width="3" height="3"/></svg>
|
|||
|
|
<span class="tool-btn-label">Block</span>
|
|||
|
|
<span class="tool-btn-kbd">B</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="tool-btn" data-tool="table" title="Tisch (TAB)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="9" width="16" height="6" rx="1"/><line x1="6" y1="15" x2="6" y2="19"/><line x1="18" y1="15" x2="18" y2="19"/></svg>
|
|||
|
|
<span class="tool-btn-label">Tisch</span>
|
|||
|
|
<span class="tool-btn-kbd">TAB</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="tool-btn" data-tool="stage" title="Bühne">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 17h20v3H2z"/><path d="M5 14V8h14v6"/><path d="M9 14v-3"/><path d="M15 14v-3"/></svg>
|
|||
|
|
<span class="tool-btn-label">Bühne</span>
|
|||
|
|
<span class="tool-btn-kbd">S</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="leftbar-footer">
|
|||
|
|
<button class="leftbar-footer-btn" title="Plugin hinzufügen" aria-label="Plugin hinzufügen">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
|
|||
|
|
</button>
|
|||
|
|
<button class="leftbar-footer-btn" title="Werkzeugkasten anpassen" aria-label="Werkzeugkasten anpassen">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
|||
|
|
</button>
|
|||
|
|
<button class="leftbar-footer-btn" title="Hilfe (F1)" aria-label="Hilfe">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</aside>
|
|||
|
|
|
|||
|
|
<!-- CANVAS AREA -->
|
|||
|
|
<section class="canvas-area" id="canvas-area" aria-label="CAD Zeichenfläche">
|
|||
|
|
|
|||
|
|
<!-- Coordinate display (top-left) -->
|
|||
|
|
<div class="canvas-coords" role="status" aria-live="polite">
|
|||
|
|
<span><span class="canvas-coords-label">X</span><span class="canvas-coords-val" id="coord-x">0.000</span></span>
|
|||
|
|
<span><span class="canvas-coords-label">Y</span><span class="canvas-coords-val" id="coord-y">0.000</span></span>
|
|||
|
|
<span style="color: var(--color-text-faint);">m</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- View tabs (top-right) -->
|
|||
|
|
<div class="canvas-view-tabs" role="tablist" aria-label="Ansicht umschalten">
|
|||
|
|
<button class="canvas-view-tab active" data-view="2d">2D</button>
|
|||
|
|
<button class="canvas-view-tab" data-view="iso">ISO</button>
|
|||
|
|
<button class="canvas-view-tab" data-view="front">Front</button>
|
|||
|
|
<button class="canvas-view-tab" data-view="top">Top</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Main SVG canvas -->
|
|||
|
|
<svg class="canvas-svg" id="canvas-svg" viewBox="0 0 1200 700" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Festsaal Stuttgart Grundriss">
|
|||
|
|
<defs>
|
|||
|
|
<pattern id="grid-minor" width="20" height="20" patternUnits="userSpaceOnUse">
|
|||
|
|
<path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/>
|
|||
|
|
</pattern>
|
|||
|
|
<pattern id="grid-major" width="100" height="100" patternUnits="userSpaceOnUse">
|
|||
|
|
<rect width="100" height="100" fill="url(#grid-minor)"/>
|
|||
|
|
<path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.12)" stroke-width="0.8"/>
|
|||
|
|
</pattern>
|
|||
|
|
<pattern id="hatch-stage" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
|
|||
|
|
<line x1="0" y1="0" x2="0" y2="8" stroke="#f59e0b" stroke-width="1.5"/>
|
|||
|
|
</pattern>
|
|||
|
|
<pattern id="hatch-table" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
|
|||
|
|
<line x1="0" y1="0" x2="0" y2="6" stroke="#94a3b8" stroke-width="0.8"/>
|
|||
|
|
</pattern>
|
|||
|
|
<marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
|||
|
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="#94a3b8"/>
|
|||
|
|
</marker>
|
|||
|
|
</defs>
|
|||
|
|
|
|||
|
|
<!-- Background grid -->
|
|||
|
|
<rect width="1200" height="700" fill="#0f172a"/>
|
|||
|
|
<rect width="1200" height="700" fill="url(#grid-major)"/>
|
|||
|
|
|
|||
|
|
<!-- Origin axes (subtle) -->
|
|||
|
|
<line x1="0" y1="350" x2="1200" y2="350" stroke="rgba(96,165,250,0.18)" stroke-width="1" stroke-dasharray="2 4"/>
|
|||
|
|
<line x1="600" y1="0" x2="600" y2="700" stroke="rgba(96,165,250,0.18)" stroke-width="1" stroke-dasharray="2 4"/>
|
|||
|
|
|
|||
|
|
<!-- Hall outline (35m x 20m, scale 14 px/m, origin top-left of hall) -->
|
|||
|
|
<g id="hall">
|
|||
|
|
<rect x="150" y="120" width="700" height="420" fill="#1e293b" stroke="#e2e8f0" stroke-width="2.5"/>
|
|||
|
|
<text x="500" y="105" text-anchor="middle" fill="#e2e8f0" font-family="Inter, sans-serif" font-size="14" font-weight="600">Festsaal Stuttgart · 35 m × 20 m</text>
|
|||
|
|
|
|||
|
|
<!-- Stage (Bühne) - top -->
|
|||
|
|
<g id="stage">
|
|||
|
|
<rect x="350" y="120" width="300" height="60" fill="url(#hatch-stage)" stroke="#f59e0b" stroke-width="1.5"/>
|
|||
|
|
<text x="500" y="155" text-anchor="middle" fill="#fbbf24" font-family="Inter, sans-serif" font-size="12" font-weight="600">BÜHNE</text>
|
|||
|
|
<text x="500" y="172" text-anchor="middle" fill="#fbbf24" font-family="Inter, sans-serif" font-size="9" opacity="0.7">10 m × 3 m</text>
|
|||
|
|
</g>
|
|||
|
|
|
|||
|
|
<!-- Entrance -->
|
|||
|
|
<g id="entrance">
|
|||
|
|
<rect x="450" y="538" width="100" height="6" fill="#10b981" stroke="#10b981" stroke-width="1"/>
|
|||
|
|
<text x="500" y="555" text-anchor="middle" fill="#10b981" font-family="Inter, sans-serif" font-size="9" font-weight="500">EINGANG</text>
|
|||
|
|
</g>
|
|||
|
|
|
|||
|
|
<!-- Row 1: 22 chairs (left-right), 0.6m spacing, 0.5m chair width -->
|
|||
|
|
<g id="seating">
|
|||
|
|
<!-- Row 1 -->
|
|||
|
|
<g transform="translate(200, 220)">
|
|||
|
|
<g id="row1">
|
|||
|
|
<!-- 22 chairs -->
|
|||
|
|
<rect x="0" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="16" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="32" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="48" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="64" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="80" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="96" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="112" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="128" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="144" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="160" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="176" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="192" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="208" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="224" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="240" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="256" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="272" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="288" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="304" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="320" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="336" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
</g>
|
|||
|
|
</g>
|
|||
|
|
<!-- Rows 2-5 (spacing 28) -->
|
|||
|
|
<g transform="translate(200, 254)">
|
|||
|
|
<rect x="0" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="16" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="32" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="48" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="64" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="80" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="96" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="112" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="128" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="144" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="160" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="176" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="192" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="208" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="224" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="240" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="256" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="272" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="288" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="304" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="320" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="336" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
</g>
|
|||
|
|
<g transform="translate(200, 288)">
|
|||
|
|
<rect x="0" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="16" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="32" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="48" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="64" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="80" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="96" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="112" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="128" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="144" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="160" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="176" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="192" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="208" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="224" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="240" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="256" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="272" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="288" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="304" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="320" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="336" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
</g>
|
|||
|
|
<g transform="translate(200, 322)">
|
|||
|
|
<rect x="0" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="16" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="32" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="48" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="64" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="80" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="96" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="112" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="128" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="144" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="160" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="176" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="192" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="208" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="224" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="240" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="256" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="272" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="288" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="304" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="320" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="336" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
</g>
|
|||
|
|
<g transform="translate(200, 356)">
|
|||
|
|
<rect x="0" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="16" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="32" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="48" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="64" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="80" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="96" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="112" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="128" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="144" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="160" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="176" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="192" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="208" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="224" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="240" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="256" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="272" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="288" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="304" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="320" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
<rect x="336" y="0" width="11" height="11" rx="2" fill="#3b82f6" stroke="#60a5fa" stroke-width="0.5"/>
|
|||
|
|
</g>
|
|||
|
|
</g>
|
|||
|
|
|
|||
|
|
<!-- Tables (Tafelrunde) right block -->
|
|||
|
|
<g id="tables">
|
|||
|
|
<g transform="translate(610, 220)">
|
|||
|
|
<circle cx="0" cy="0" r="22" fill="url(#hatch-table)" stroke="#94a3b8" stroke-width="1.5"/>
|
|||
|
|
<circle cx="0" cy="0" r="5" fill="#94a3b8"/>
|
|||
|
|
<text x="0" y="-30" text-anchor="middle" fill="#cbd5e1" font-family="Inter, sans-serif" font-size="9">T1 · 8 Pers</text>
|
|||
|
|
</g>
|
|||
|
|
<g transform="translate(700, 220)">
|
|||
|
|
<circle cx="0" cy="0" r="22" fill="url(#hatch-table)" stroke="#94a3b8" stroke-width="1.5"/>
|
|||
|
|
<circle cx="0" cy="0" r="5" fill="#94a3b8"/>
|
|||
|
|
<text x="0" y="-30" text-anchor="middle" fill="#cbd5e1" font-family="Inter, sans-serif" font-size="9">T2</text>
|
|||
|
|
</g>
|
|||
|
|
<g transform="translate(790, 220)">
|
|||
|
|
<circle cx="0" cy="0" r="22" fill="url(#hatch-table)" stroke="#94a3b8" stroke-width="1.5"/>
|
|||
|
|
<circle cx="0" cy="0" r="5" fill="#94a3b8"/>
|
|||
|
|
<text x="0" y="-30" text-anchor="middle" fill="#cbd5e1" font-family="Inter, sans-serif" font-size="9">T3</text>
|
|||
|
|
</g>
|
|||
|
|
<g transform="translate(655, 310)">
|
|||
|
|
<circle cx="0" cy="0" r="22" fill="url(#hatch-table)" stroke="#94a3b8" stroke-width="1.5"/>
|
|||
|
|
<circle cx="0" cy="0" r="5" fill="#94a3b8"/>
|
|||
|
|
<text x="0" y="-30" text-anchor="middle" fill="#cbd5e1" font-family="Inter, sans-serif" font-size="9">T4</text>
|
|||
|
|
</g>
|
|||
|
|
<g transform="translate(745, 310)">
|
|||
|
|
<circle cx="0" cy="0" r="22" fill="url(#hatch-table)" stroke="#94a3b8" stroke-width="1.5"/>
|
|||
|
|
<circle cx="0" cy="0" r="5" fill="#94a3b8"/>
|
|||
|
|
<text x="0" y="-30" text-anchor="middle" fill="#cbd5e1" font-family="Inter, sans-serif" font-size="9">T5</text>
|
|||
|
|
</g>
|
|||
|
|
<g transform="translate(700, 400)">
|
|||
|
|
<rect x="-30" y="-20" width="60" height="40" rx="4" fill="url(#hatch-table)" stroke="#94a3b8" stroke-width="1.5"/>
|
|||
|
|
<text x="0" y="-26" text-anchor="middle" fill="#cbd5e1" font-family="Inter, sans-serif" font-size="9">T6 · Bankett</text>
|
|||
|
|
</g>
|
|||
|
|
</g>
|
|||
|
|
|
|||
|
|
<!-- Dimensions -->
|
|||
|
|
<g id="dimensions" stroke="#94a3b8" fill="#cbd5e1" font-family="Inter, sans-serif" font-size="10">
|
|||
|
|
<!-- Width dimension (top) -->
|
|||
|
|
<line x1="150" y1="100" x2="850" y2="100" marker-start="url(#arrow)" marker-end="url(#arrow)"/>
|
|||
|
|
<text x="500" y="94" text-anchor="middle" font-weight="500">35.00 m</text>
|
|||
|
|
<!-- Height dimension (left) -->
|
|||
|
|
<line x1="130" y1="120" x2="130" y2="540" marker-start="url(#arrow)" marker-end="url(#arrow)"/>
|
|||
|
|
<text x="118" y="335" text-anchor="middle" font-weight="500" transform="rotate(-90, 118, 335)">20.00 m</text>
|
|||
|
|
</g>
|
|||
|
|
|
|||
|
|
<!-- Selection example (highlighted chair) -->
|
|||
|
|
<rect x="240" y="220" width="11" height="11" rx="2" fill="none" stroke="#10b981" stroke-width="2" stroke-dasharray="2 2">
|
|||
|
|
<animate attributeName="stroke-dashoffset" from="0" to="4" dur="0.5s" repeatCount="indefinite"/>
|
|||
|
|
</rect>
|
|||
|
|
</g>
|
|||
|
|
|
|||
|
|
<!-- Compass rose -->
|
|||
|
|
<g transform="translate(1100, 60)">
|
|||
|
|
<circle r="22" fill="#1e293b" stroke="#475569" stroke-width="1"/>
|
|||
|
|
<text y="-12" text-anchor="middle" fill="#ef4444" font-family="Inter, sans-serif" font-size="10" font-weight="700">N</text>
|
|||
|
|
<text y="20" text-anchor="middle" fill="#94a3b8" font-family="Inter, sans-serif" font-size="10">S</text>
|
|||
|
|
<text x="-14" y="3" text-anchor="middle" fill="#94a3b8" font-family="Inter, sans-serif" font-size="10">W</text>
|
|||
|
|
<text x="14" y="3" text-anchor="middle" fill="#94a3b8" font-family="Inter, sans-serif" font-size="10">E</text>
|
|||
|
|
<polygon points="0,-8 3,4 0,1 -3,4" fill="#ef4444"/>
|
|||
|
|
</g>
|
|||
|
|
</svg>
|
|||
|
|
|
|||
|
|
<!-- Floating canvas toolbar (zoom/pan/grid) -->
|
|||
|
|
<div class="canvas-toolbar" role="toolbar" aria-label="Canvas-Werkzeuge">
|
|||
|
|
<button class="canvas-toolbar-btn" id="btn-zoom-out" title="Herauszoomen (-)" aria-label="Herauszoomen">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
|
|||
|
|
</button>
|
|||
|
|
<span class="canvas-zoom-display" id="zoom-display">100%</span>
|
|||
|
|
<button class="canvas-toolbar-btn" id="btn-zoom-in" title="Hineinzoomen (+)" aria-label="Hineinzoomen">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
|
|||
|
|
</button>
|
|||
|
|
<button class="canvas-toolbar-btn" id="btn-zoom-fit" title="Zoom anpassen (F)" aria-label="Zoom anpassen">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><line x1="7" y1="12" x2="17" y2="12"/></svg>
|
|||
|
|
</button>
|
|||
|
|
<div class="canvas-toolbar-divider"></div>
|
|||
|
|
<button class="canvas-toolbar-btn active" id="btn-grid" title="Grid ein/aus (F7)" aria-label="Grid umschalten" aria-pressed="true">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/></svg>
|
|||
|
|
</button>
|
|||
|
|
<button class="canvas-toolbar-btn" id="btn-ortho" title="Ortho-Modus (F8)" aria-label="Ortho-Modus umschalten" aria-pressed="false">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l18 18M3 21l18-18"/></svg>
|
|||
|
|
</button>
|
|||
|
|
<button class="canvas-toolbar-btn" id="btn-snap" title="Snap ein/aus (F3)" aria-label="Snap umschalten" aria-pressed="true">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4M12 18v4M2 12h4M18 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/><circle cx="12" cy="12" r="3"/></svg>
|
|||
|
|
</button>
|
|||
|
|
<div class="canvas-toolbar-divider"></div>
|
|||
|
|
<button class="canvas-toolbar-btn" title="Vorherige Ansicht" aria-label="Vorherige Ansicht">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- Right vertical tab bar (visible on mobile, hidden on desktop via CSS) -->
|
|||
|
|
<nav class="right-tab-bar" aria-label="Schnellzugriff Panels" role="navigation">
|
|||
|
|
<button class="right-tab-btn active" data-drawer="tool" aria-label="Werkzeug">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
|
|||
|
|
<span>Werkzg</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="right-tab-btn" data-drawer="layer" aria-label="Layer">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>
|
|||
|
|
<span>Layer</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="right-tab-btn" data-drawer="library" aria-label="Bibliothek">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><line x1="3" y1="12" x2="21" y2="12"/></svg>
|
|||
|
|
<span>Bibli</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="right-tab-btn" data-drawer="ki" aria-label="KI Copilot">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
|
|||
|
|
<span>KI</span>
|
|||
|
|
<span class="right-tab-btn-badge">2</span>
|
|||
|
|
</button>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
<!-- RIGHT SIDEBAR -->
|
|||
|
|
<aside class="rightbar" aria-label="Eigenschaften-Panels">
|
|||
|
|
<div class="rightbar-tabs" role="tablist">
|
|||
|
|
<button class="rightbar-tab active" data-panel="tool" role="tab" aria-selected="true">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
|
|||
|
|
<span>Werkzeug</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="rightbar-tab" data-panel="layer" role="tab">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>
|
|||
|
|
<span>Layer</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="rightbar-tab" data-panel="library" role="tab">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><line x1="3" y1="12" x2="21" y2="12"/></svg>
|
|||
|
|
<span>Bibliothek</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="rightbar-tab" data-panel="ki" role="tab">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
|
|||
|
|
<span>KI</span>
|
|||
|
|
<span class="rightbar-tab-badge">2</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="rightbar-content">
|
|||
|
|
<!-- TOOL PANEL -->
|
|||
|
|
<div class="rightbar-panel active" data-panel-content="tool">
|
|||
|
|
<div class="panel-section">
|
|||
|
|
<div class="panel-section-title">
|
|||
|
|
<span>Auswahl · 1 Stuhl</span>
|
|||
|
|
<button style="color: var(--color-text-muted); font-size: 11px;" title="Mehr Optionen">
|
|||
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="panel-section">
|
|||
|
|
<div class="panel-section-title"><span>Geometrie</span></div>
|
|||
|
|
<div class="prop-row">
|
|||
|
|
<span class="prop-label">Position X</span>
|
|||
|
|
<input class="prop-input" type="text" value="2.143 m" aria-label="Position X">
|
|||
|
|
</div>
|
|||
|
|
<div class="prop-row">
|
|||
|
|
<span class="prop-label">Position Y</span>
|
|||
|
|
<input class="prop-input" type="text" value="7.500 m" aria-label="Position Y">
|
|||
|
|
</div>
|
|||
|
|
<div class="prop-row">
|
|||
|
|
<span class="prop-label">Breite</span>
|
|||
|
|
<input class="prop-input" type="text" value="0.50 m" aria-label="Breite">
|
|||
|
|
</div>
|
|||
|
|
<div class="prop-row">
|
|||
|
|
<span class="prop-label">Tiefe</span>
|
|||
|
|
<input class="prop-input" type="text" value="0.50 m" aria-label="Tiefe">
|
|||
|
|
</div>
|
|||
|
|
<div class="prop-row">
|
|||
|
|
<span class="prop-label">Drehung</span>
|
|||
|
|
<input class="prop-input" type="text" value="0.00°" aria-label="Drehung">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="panel-section">
|
|||
|
|
<div class="panel-section-title"><span>Darstellung</span></div>
|
|||
|
|
<div class="prop-row">
|
|||
|
|
<span class="prop-label">Farbe</span>
|
|||
|
|
<div class="prop-color-row">
|
|||
|
|
<div class="prop-color-swatch" style="background: #3b82f6;" aria-hidden="true"></div>
|
|||
|
|
<input class="prop-swatch-input" type="color" value="#3b82f6" aria-label="Stuhlfarbe">
|
|||
|
|
<input class="prop-input" type="text" value="#3B82F6" aria-label="Farb-Hex">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="prop-row">
|
|||
|
|
<span class="prop-label">Linientyp</span>
|
|||
|
|
<select class="prop-select" aria-label="Linientyp">
|
|||
|
|
<option>Solid (durchgehend)</option>
|
|||
|
|
<option>Dashed (gestrichelt)</option>
|
|||
|
|
<option>Dotted (gepunktet)</option>
|
|||
|
|
<option>Dash-Dot</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="prop-row">
|
|||
|
|
<span class="prop-label">Stärke</span>
|
|||
|
|
<select class="prop-select" aria-label="Linienstärke">
|
|||
|
|
<option>0.18 mm · Normal</option>
|
|||
|
|
<option>0.25 mm · Dick</option>
|
|||
|
|
<option>0.35 mm · Extra</option>
|
|||
|
|
<option>0.50 mm · Max</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="prop-row">
|
|||
|
|
<span class="prop-label">Layer</span>
|
|||
|
|
<select class="prop-select" aria-label="Layer zuweisen">
|
|||
|
|
<option>Bestuhlung · Standard</option>
|
|||
|
|
<option>Bestuhlung · VIP</option>
|
|||
|
|
<option>Möbel · Tische</option>
|
|||
|
|
<option>Bühne</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="panel-section">
|
|||
|
|
<div class="panel-section-title"><span>Block</span></div>
|
|||
|
|
<div class="prop-row">
|
|||
|
|
<span class="prop-label">Block-Name</span>
|
|||
|
|
<input class="prop-input" type="text" value="Stuhl-Standard" aria-label="Block-Name">
|
|||
|
|
</div>
|
|||
|
|
<div class="prop-row">
|
|||
|
|
<span class="prop-label">Beschreibung</span>
|
|||
|
|
<input class="prop-input" type="text" value="Standard-Konferenzstuhl 0.5×0.5m" aria-label="Beschreibung">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- LAYER PANEL -->
|
|||
|
|
<div class="rightbar-panel" data-panel-content="layer">
|
|||
|
|
<div class="panel-section">
|
|||
|
|
<div class="panel-section-title">
|
|||
|
|
<span>Ebenen-Struktur</span>
|
|||
|
|
<button style="color: var(--color-text-muted);" title="Optionen" aria-label="Layer-Optionen">
|
|||
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="tree tree-layer" role="tree" aria-label="Layer-Struktur">
|
|||
|
|
<div class="tree-node" role="treeitem" aria-expanded="true">
|
|||
|
|
<div class="tree-row tree-row-folder" data-tree-toggle>
|
|||
|
|
<button class="tree-toggle" aria-label="Einklappen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button>
|
|||
|
|
<span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7l9-4 9 4-9 4-9-4z"/><path d="M3 12l9 4 9-4"/><path d="M3 17l9 4 9-4"/></svg></span>
|
|||
|
|
<span class="tree-name">Bestuhlung</span>
|
|||
|
|
<span class="tree-count">110</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="tree-children" role="group">
|
|||
|
|
<div class="tree-node" role="treeitem" aria-expanded="true">
|
|||
|
|
<div class="tree-row tree-row-folder" data-tree-toggle>
|
|||
|
|
<button class="tree-toggle" aria-label="Einklappen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button>
|
|||
|
|
<span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="1.5"><rect x="8" y="4" width="8" height="10" rx="1"/><line x1="7" y1="14" x2="7" y2="20"/><line x1="17" y1="14" x2="17" y2="20"/></svg></span>
|
|||
|
|
<span class="tree-name">Reihe 1</span>
|
|||
|
|
<span class="tree-count">30</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="tree-children" role="group">
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf active" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="1.5"><rect x="8" y="4" width="8" height="10" rx="1"/><line x1="7" y1="14" x2="7" y2="20"/><line x1="17" y1="14" x2="17" y2="20"/></svg></span><span class="tree-name">Stuhl 1.1</span></div></div>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="1.5"><rect x="8" y="4" width="8" height="10" rx="1"/><line x1="7" y1="14" x2="7" y2="20"/><line x1="17" y1="14" x2="17" y2="20"/></svg></span><span class="tree-name">Stuhl 1.2</span></div></div>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="1.5"><rect x="8" y="4" width="8" height="10" rx="1"/><line x1="7" y1="14" x2="7" y2="20"/><line x1="17" y1="14" x2="17" y2="20"/></svg></span><span class="tree-name">Stuhl 1.30</span></div></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tree-node" role="treeitem" aria-expanded="false">
|
|||
|
|
<div class="tree-row tree-row-folder" data-tree-toggle>
|
|||
|
|
<button class="tree-toggle" aria-label="Aufklappen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 6 15 12 9 18"/></svg></button>
|
|||
|
|
<span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="1.5"><rect x="8" y="4" width="8" height="10" rx="1"/><line x1="7" y1="14" x2="7" y2="20"/><line x1="17" y1="14" x2="17" y2="20"/></svg></span>
|
|||
|
|
<span class="tree-name">Reihe 2</span>
|
|||
|
|
<span class="tree-count">30</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="tree-children" role="group" hidden>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="1.5"><rect x="8" y="4" width="8" height="10" rx="1"/><line x1="7" y1="14" x2="7" y2="20"/><line x1="17" y1="14" x2="17" y2="20"/></svg></span><span class="tree-name">Stuhl 1.1</span></div></div>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="1.5"><rect x="8" y="4" width="8" height="10" rx="1"/><line x1="7" y1="14" x2="7" y2="20"/><line x1="17" y1="14" x2="17" y2="20"/></svg></span><span class="tree-name">Stuhl 1.30</span></div></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tree-node" role="treeitem" aria-expanded="false">
|
|||
|
|
<div class="tree-row tree-row-folder" data-tree-toggle>
|
|||
|
|
<button class="tree-toggle" aria-label="Aufklappen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 6 15 12 9 18"/></svg></button>
|
|||
|
|
<span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="1.5"><rect x="8" y="4" width="8" height="10" rx="1"/><line x1="7" y1="14" x2="7" y2="20"/><line x1="17" y1="14" x2="17" y2="20"/></svg></span>
|
|||
|
|
<span class="tree-name">Reihe 3</span>
|
|||
|
|
<span class="tree-count">30</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="tree-children" role="group" hidden>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="1.5"><rect x="8" y="4" width="8" height="10" rx="1"/><line x1="7" y1="14" x2="7" y2="20"/><line x1="17" y1="14" x2="17" y2="20"/></svg></span><span class="tree-name">Stuhl 1.1</span></div></div>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="1.5"><rect x="8" y="4" width="8" height="10" rx="1"/><line x1="7" y1="14" x2="7" y2="20"/><line x1="17" y1="14" x2="17" y2="20"/></svg></span><span class="tree-name">Stuhl 1.30</span></div></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tree-node" role="treeitem" aria-expanded="false">
|
|||
|
|
<div class="tree-row tree-row-folder" data-tree-toggle>
|
|||
|
|
<button class="tree-toggle" aria-label="Aufklappen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 6 15 12 9 18"/></svg></button>
|
|||
|
|
<span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5"><rect x="3" y="9" width="18" height="6" rx="1"/><line x1="6" y1="15" x2="6" y2="19"/><line x1="18" y1="15" x2="18" y2="19"/></svg></span>
|
|||
|
|
<span class="tree-name">Tische</span>
|
|||
|
|
<span class="tree-count">6</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="tree-children" role="group" hidden>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf lib-draggable" draggable="true" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5"><rect x="3" y="9" width="18" height="6" rx="1"/><line x1="6" y1="15" x2="6" y2="19"/><line x1="18" y1="15" x2="18" y2="19"/></svg></span><span class="tree-name">Bankett-Tisch 1.8×0.8</span><span class="lib-drag-hint">⠿</span></div></div>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf lib-draggable" draggable="true" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5"><circle cx="12" cy="12" r="8"/><line x1="6" y1="20" x2="8" y2="14"/><line x1="18" y1="20" x2="16" y2="14"/></svg></span><span class="tree-name">Runde-Tisch 1.5m Ø</span><span class="lib-drag-hint">⠿</span></div></div>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf lib-draggable" draggable="true" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5"><rect x="3" y="9" width="18" height="6" rx="1"/><line x1="6" y1="15" x2="6" y2="19"/><line x1="18" y1="15" x2="18" y2="19"/></svg></span><span class="tree-name">Tisch-Rund 8 Pers</span><span class="lib-drag-hint">⠿</span></div></div>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf lib-draggable" draggable="true" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5"><rect x="3" y="9" width="18" height="6" rx="1"/><line x1="6" y1="15" x2="6" y2="19"/><line x1="18" y1="15" x2="18" y2="19"/></svg></span><span class="tree-name">Bankett-Tisch 2.4m</span><span class="lib-drag-hint">⠿</span></div></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tree-node" role="treeitem" aria-expanded="false">
|
|||
|
|
<div class="tree-row tree-row-folder" data-tree-toggle>
|
|||
|
|
<button class="tree-toggle" aria-label="Aufklappen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 6 15 12 9 18"/></svg></button>
|
|||
|
|
<span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="1.5"><path d="M2 17h20v3H2z"/><path d="M5 14V8h14v6"/></svg></span>
|
|||
|
|
<span class="tree-name">Bühne</span>
|
|||
|
|
<span class="tree-count">1</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="tree-children" role="group" hidden>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="1.5"><path d="M2 17h20v3H2z"/><path d="M5 14V8h14v6"/></svg></span><span class="tree-name">Hauptbühne 10m × 3m</span></div></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tree-node" role="treeitem" aria-expanded="false">
|
|||
|
|
<div class="tree-row tree-row-folder" data-tree-toggle>
|
|||
|
|
<button class="tree-toggle" aria-label="Aufklappen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 6 15 12 9 18"/></svg></button>
|
|||
|
|
<span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="1.5"><rect x="3" y="3" width="18" height="18"/></svg></span>
|
|||
|
|
<span class="tree-name">Wände</span>
|
|||
|
|
<span class="tree-count">4</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="tree-children" role="group" hidden>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="1.5"><rect x="3" y="3" width="18" height="18"/></svg></span><span class="tree-name">Außenwand Nord 35m</span></div></div>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="1.5"><rect x="3" y="3" width="18" height="18"/></svg></span><span class="tree-name">Außenwand Süd 35m</span></div></div>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="1.5"><rect x="3" y="3" width="18" height="18"/></svg></span><span class="tree-name">Außenwand West 20m</span></div></div>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="1.5"><rect x="3" y="3" width="18" height="18"/></svg></span><span class="tree-name">Außenwand Ost 20m</span></div></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tree-node" role="treeitem" aria-expanded="false">
|
|||
|
|
<div class="tree-row tree-row-folder" data-tree-toggle>
|
|||
|
|
<button class="tree-toggle" aria-label="Aufklappen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 6 15 12 9 18"/></svg></button>
|
|||
|
|
<span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="1.5"><path d="M4 7V4h16v3M9 20h6M12 4v16"/></svg></span>
|
|||
|
|
<span class="tree-name">Beschriftung</span>
|
|||
|
|
<span class="tree-count">5</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="tree-children" role="group" hidden>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="1.5"><path d="M4 7V4h16v3M9 20h6M12 4v16"/></svg></span><span class="tree-name">EINGANG</span></div></div>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="1.5"><path d="M4 7V4h16v3M9 20h6M12 4v16"/></svg></span><span class="tree-name">BÜHNE</span></div></div>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="1.5"><path d="M4 7V4h16v3M9 20h6M12 4v16"/></svg></span><span class="tree-name">T1 – Tisch 1, 8 Pers</span></div></div>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="1.5"><path d="M4 7V4h16v3M9 20h6M12 4v16"/></svg></span><span class="tree-name">35.00 m</span></div></div>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="1.5"><path d="M4 7V4h16v3M9 20h6M12 4v16"/></svg></span><span class="tree-name">20.00 m</span></div></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<button class="add-layer-btn">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
|||
|
|
Ebene hinzufügen
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="rightbar-panel" data-panel-content="library">
|
|||
|
|
<div class="lib-search">
|
|||
|
|
<span class="lib-search-icon">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
|||
|
|
</span>
|
|||
|
|
<input type="text" placeholder="Block suchen..." aria-label="Bibliothek durchsuchen">
|
|||
|
|
</div>
|
|||
|
|
<div class="lib-categories">
|
|||
|
|
<button class="lib-cat active">Alle</button>
|
|||
|
|
<button class="lib-cat">Bestuhlung</button>
|
|||
|
|
<button class="lib-cat">Tische</button>
|
|||
|
|
<button class="lib-cat">Bühne</button>
|
|||
|
|
<button class="lib-cat">Deko</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="tree tree-library" role="tree" aria-label="Bibliothek-Struktur">
|
|||
|
|
<div class="tree-node" role="treeitem" aria-expanded="true">
|
|||
|
|
<div class="tree-row tree-row-folder" data-tree-toggle>
|
|||
|
|
<button class="tree-toggle" aria-label="Einklappen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button>
|
|||
|
|
<span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="1.5"><path d="M3 7l9-4 9 4-9 4-9-4z"/><path d="M3 12l9 4 9-4"/><path d="M3 17l9 4 9-4"/></svg></span>
|
|||
|
|
<span class="tree-name">Bestuhlung</span>
|
|||
|
|
<span class="tree-count">8</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="tree-children" role="group">
|
|||
|
|
<div class="tree-node" role="treeitem" aria-expanded="true">
|
|||
|
|
<div class="tree-row tree-row-folder" data-tree-toggle>
|
|||
|
|
<button class="tree-toggle" aria-label="Einklappen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button>
|
|||
|
|
<span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="1.5"><rect x="8" y="4" width="8" height="10" rx="1"/><line x1="7" y1="14" x2="7" y2="20"/><line x1="17" y1="14" x2="17" y2="20"/></svg></span>
|
|||
|
|
<span class="tree-name">Stühle</span>
|
|||
|
|
<span class="tree-count">4</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="tree-children" role="group">
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf lib-draggable" draggable="true" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="1.5"><rect x="8" y="4" width="8" height="10" rx="1"/><line x1="7" y1="14" x2="7" y2="20"/><line x1="17" y1="14" x2="17" y2="20"/></svg></span><span class="tree-name">Stuhl-Standard 0.5×0.5</span><span class="lib-drag-hint">⠿</span></div></div>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf lib-draggable" draggable="true" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="1.5"><path d="M7 4h10v8a3 3 0 0 1-3 3h-4a3 3 0 0 1-3-3z"/><line x1="6" y1="15" x2="6" y2="20"/><line x1="18" y1="15" x2="18" y2="20"/><path d="M9 7l3-3 3 3"/></svg></span><span class="tree-name">Stuhl-Konferenz 0.6×0.6</span><span class="lib-drag-hint">⠿</span></div></div>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf lib-draggable" draggable="true" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="1.5"><rect x="8" y="4" width="8" height="10" rx="1"/><line x1="7" y1="14" x2="7" y2="20"/><line x1="17" y1="14" x2="17" y2="20"/></svg></span><span class="tree-name">Stuhl-Klappbar 0.45×0.5</span><span class="lib-drag-hint">⠿</span></div></div>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf lib-draggable" draggable="true" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" stroke-width="1.5"><rect x="8" y="4" width="8" height="10" rx="1"/><line x1="7" y1="14" x2="7" y2="20"/><line x1="17" y1="14" x2="17" y2="20"/></svg></span><span class="tree-name">Stuhl-VIP Polster</span><span class="lib-drag-hint">⠿</span></div></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tree-node" role="treeitem" aria-expanded="false">
|
|||
|
|
<div class="tree-row tree-row-folder" data-tree-toggle>
|
|||
|
|
<button class="tree-toggle" aria-label="Aufklappen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 6 15 12 9 18"/></svg></button>
|
|||
|
|
<span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5"><rect x="3" y="9" width="18" height="6" rx="1"/><line x1="6" y1="15" x2="6" y2="19"/><line x1="18" y1="15" x2="18" y2="19"/></svg></span>
|
|||
|
|
<span class="tree-name">Tische</span>
|
|||
|
|
<span class="tree-count">4</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="tree-children" role="group" hidden>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf lib-draggable" draggable="true" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5"><rect x="3" y="9" width="18" height="6" rx="1"/><line x1="6" y1="15" x2="6" y2="19"/><line x1="18" y1="15" x2="18" y2="19"/></svg></span><span class="tree-name">Bankett-Tisch 1.8×0.8</span><span class="lib-drag-hint">⠿</span></div></div>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf lib-draggable" draggable="true" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5"><circle cx="12" cy="12" r="8"/><line x1="6" y1="20" x2="8" y2="14"/><line x1="18" y1="20" x2="16" y2="14"/></svg></span><span class="tree-name">Runde-Tisch 1.5m Ø</span><span class="lib-drag-hint">⠿</span></div></div>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf lib-draggable" draggable="true" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5"><rect x="3" y="9" width="18" height="6" rx="1"/><line x1="6" y1="15" x2="6" y2="19"/><line x1="18" y1="15" x2="18" y2="19"/></svg></span><span class="tree-name">Tisch-Rund 8 Pers</span><span class="lib-drag-hint">⠿</span></div></div>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf lib-draggable" draggable="true" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5"><rect x="3" y="9" width="18" height="6" rx="1"/><line x1="6" y1="15" x2="6" y2="19"/><line x1="18" y1="15" x2="18" y2="19"/></svg></span><span class="tree-name">Bankett-Tisch 2.4m</span><span class="lib-drag-hint">⠿</span></div></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tree-node" role="treeitem" aria-expanded="false">
|
|||
|
|
<div class="tree-row tree-row-folder" data-tree-toggle>
|
|||
|
|
<button class="tree-toggle" aria-label="Aufklappen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 6 15 12 9 18"/></svg></button>
|
|||
|
|
<span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="1.5"><path d="M2 17h20v3H2z"/><path d="M5 14V8h14v6"/></svg></span>
|
|||
|
|
<span class="tree-name">Bühne</span>
|
|||
|
|
<span class="tree-count">3</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="tree-children" role="group" hidden>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="1.5"><path d="M2 17h20v3H2z"/><path d="M5 14V8h14v6"/></svg></span><span class="tree-name">Hauptbühne 10m × 3m</span></div></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tree-node" role="treeitem" aria-expanded="false">
|
|||
|
|
<div class="tree-row tree-row-folder" data-tree-toggle>
|
|||
|
|
<button class="tree-toggle" aria-label="Aufklappen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 6 15 12 9 18"/></svg></button>
|
|||
|
|
<span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="1.5"><path d="M12 2l3 6 6 1-4.5 4 1 6L12 16l-5.5 3 1-6L3 9l6-1z"/></svg></span>
|
|||
|
|
<span class="tree-name">Dekoration</span>
|
|||
|
|
<span class="tree-count">5</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="tree-children" role="group" hidden>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf lib-draggable" draggable="true" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="1.5"><path d="M12 2l3 6 6 1-4.5 4 1 6L12 16l-5.5 3 1-6L3 9l6-1z"/></svg></span><span class="tree-name">Stern groß</span><span class="lib-drag-hint">⠿</span></div></div>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf lib-draggable" draggable="true" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="1.5"><circle cx="12" cy="12" r="4"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/></svg></span><span class="tree-name">Pflanze groß</span><span class="lib-drag-hint">⠿</span></div></div>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf lib-draggable" draggable="true" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="1.5"><path d="M3 12h13M16 12l-4-4M16 12l-4 4"/><path d="M21 4v16"/></svg></span><span class="tree-name">Notausgang</span><span class="lib-drag-hint">⠿</span></div></div>
|
|||
|
|
<div class="tree-node" role="treeitem"><div class="tree-row tree-row-leaf lib-draggable" draggable="true" data-tree-select><span class="tree-toggle tree-toggle-leaf" aria-hidden="true"></span><span class="tree-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="1.5"><circle cx="12" cy="12" r="4"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/></svg></span><span class="tree-name">Pflanze klein</span><span class="lib-drag-hint">⠿</span></div></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="rightbar-panel" data-panel-content="ki">
|
|||
|
|
<div class="ki-header">
|
|||
|
|
<div class="ki-avatar">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div class="ki-title">KI Copilot</div>
|
|||
|
|
<div style="font-size: 11px; color: var(--color-text-muted);">Powered by GPT-4o</div>
|
|||
|
|
</div>
|
|||
|
|
<span class="ki-status">Online</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="ki-suggestions">
|
|||
|
|
<div class="ki-suggestion-title">Schnell-Aktionen</div>
|
|||
|
|
<button class="ki-chip">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
|
|||
|
|
5 Reihen à 22 Stühle anlegen
|
|||
|
|
</button>
|
|||
|
|
<button class="ki-chip">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
|||
|
|
Optimale Bestuhlung vorschlagen
|
|||
|
|
</button>
|
|||
|
|
<button class="ki-chip">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
|
|||
|
|
Überlappende Stühle finden
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="ki-chat">
|
|||
|
|
<div class="ki-msg user">
|
|||
|
|
<div class="ki-msg-bubble">Lege 5 Reihen mit je 22 Stühlen parallel zur Bühne an, Abstand 1m.</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="ki-msg assistant">
|
|||
|
|
<div class="ki-msg-bubble">
|
|||
|
|
Ich erstelle <strong>110 Stühle</strong> in 5 Reihen (Y=2,5m/3,5m/4,5m/5,5m/6,5m; X-Start=2,5m; 22 Stühle × 0,5m + 0,1m Abstand). Los geht's! <em style="color: var(--color-ki);">● function_call: placeSeating(rows=5, cols=22, gap=1.0)</em>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="ki-input-wrap">
|
|||
|
|
<input class="ki-input" type="text" placeholder="Frage den KI Copilot..." aria-label="KI Eingabe">
|
|||
|
|
<button class="ki-voice-btn" title="Spracheingabe" aria-label="Spracheingabe starten">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
|
|||
|
|
</button>
|
|||
|
|
<button class="ki-send-btn" title="Senden" aria-label="Senden">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</aside>
|
|||
|
|
|
|||
|
|
</main>
|
|||
|
|
|
|||
|
|
<!-- ==================== DRAWERS (mobile slide-in panels) ==================== -->
|
|||
|
|
<div class="scrim" id="scrim" aria-hidden="true"></div>
|
|||
|
|
|
|||
|
|
<!-- LEFT DRAWER: Werkzeugpalette -->
|
|||
|
|
<aside class="drawer drawer-left" id="drawer-left" aria-label="Werkzeugpalette" aria-hidden="true">
|
|||
|
|
<div class="drawer-header">
|
|||
|
|
<span class="drawer-title">Werkzeuge</span>
|
|||
|
|
<button class="drawer-close" data-close-drawer aria-label="Schließen">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="drawer-body" id="drawer-left-body"><!-- filled by JS --></div>
|
|||
|
|
</aside>
|
|||
|
|
|
|||
|
|
<!-- RIGHT DRAWER: Panel content -->
|
|||
|
|
<aside class="drawer drawer-right" id="drawer-right" aria-label="Panel" aria-hidden="true">
|
|||
|
|
<div class="drawer-header">
|
|||
|
|
<span class="drawer-title" id="drawer-right-title">Werkzeug</span>
|
|||
|
|
<button class="drawer-close" data-close-drawer aria-label="Schließen">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="drawer-tabs" id="drawer-right-tabs" role="tablist">
|
|||
|
|
<button class="drawer-tab active" data-drawer-tab="tool" role="tab">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
|
|||
|
|
<span>Wz</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="drawer-tab" data-drawer-tab="layer" role="tab">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>
|
|||
|
|
<span>Layer</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="drawer-tab" data-drawer-tab="library" role="tab">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
|
|||
|
|
<span>Lib</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="drawer-tab" data-drawer-tab="ki" role="tab">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/></svg>
|
|||
|
|
<span>KI</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="drawer-body" id="drawer-right-body"><!-- filled by JS --></div>
|
|||
|
|
</aside>
|
|||
|
|
|
|||
|
|
<!-- ==================== COMMAND LINE ==================== -->
|
|||
|
|
<section class="cmdline" aria-label="Befehlszeile">
|
|||
|
|
<div class="cmdline-history" id="cmdline-history" aria-live="polite">
|
|||
|
|
<div class="cmdline-history-entry info"><span class="prefix">·</span><span class="text">Bereit · Werkzeug: Auswahl · 110 Objekte · 5 Ebenen</span></div>
|
|||
|
|
<div class="cmdline-history-entry info"><span class="prefix">·</span><span class="text">Auto-Save aktiv · letzte Speicherung vor 3 Sekunden</span></div>
|
|||
|
|
<div class="cmdline-history-entry"><span class="prefix">›</span><span class="text">hallo</span></div>
|
|||
|
|
<div class="cmdline-history-entry info"><span class="prefix">·</span><span class="text">Hallo! Ich bin der KI Copilot. Tippe <strong>KI</strong> oder drücke Strg+K für Hilfe.</span></div>
|
|||
|
|
<div class="cmdline-history-entry"><span class="prefix">›</span><span class="text">BESTUHLUNG 5,22</span></div>
|
|||
|
|
<div class="cmdline-history-entry info"><span class="prefix">·</span><span class="text">110 Stühle angelegt auf Ebene "Bestuhlung" ✓</span></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="cmdline-input-wrap">
|
|||
|
|
<span class="cmdline-prompt">›</span>
|
|||
|
|
<input class="cmdline-input" type="text" id="cmdline-input" placeholder='Befehl eingeben (z. B. LINIE, KREIS, BESTUHLUNG)...' aria-label="CAD Befehlseingabe" autocomplete="off">
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- ==================== STATUS BAR ==================== -->
|
|||
|
|
<footer class="statusbar" role="status">
|
|||
|
|
<div class="status-item active" title="Snap-Modus (F3)" aria-pressed="true">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
|
|||
|
|
<span>SNAP</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="status-item" title="Ortho-Modus (F8)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l18 18M3 21l18-18"/></svg>
|
|||
|
|
<span>ORTHO</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="status-item hide-mobile" title="Polar-Tracking">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="16 12 12 8 8 12"/><line x1="12" y1="2" x2="12" y2="16"/></svg>
|
|||
|
|
<span>POLAR</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="status-item active" title="Grid anzeigen (F7)">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="3" x2="9" y2="21"/></svg>
|
|||
|
|
<span>GRID</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="status-item" style="font-family: var(--font-mono);">
|
|||
|
|
<span>X: 0.000 m</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="status-item" style="font-family: var(--font-mono);">
|
|||
|
|
<span>Y: 0.000 m</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="status-item hide-mobile" title="Layer">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/></svg>
|
|||
|
|
<span>Bestuhlung</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="status-item hide-mobile" title="Werkzeug">
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
|
|||
|
|
<span>Auswahl</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="status-item" title="1 anderer Nutzer online">
|
|||
|
|
<span class="status-dot"></span>
|
|||
|
|
<span>Online · 1 weiterer</span>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script src="assets/interactions.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|