Refactor symbols app: cleanup and fix issues
- Removed duplicate files (index2/3/4.html, symbols.js duplicates) - Kept index4.html as the main index.html (modular version) - Removed old text-generator.js (replaced by modular version) - Fixed ID mismatch in ui-bindings.js to match HTML - Added square and circle shape support in svg-generator.js - Added legend preview with copy functionality - Removed 580 lines of obsolete text-generator v4 code from app.js - Added addTextToLegend and addStandaloneArrowToLegend to export.js Still TODO: Split large files to comply with 300 line limit - app.js: 1219 lines - styles.css: 1319 lines - symbols.js: 870 lines 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
architeur
@@ -1246,3 +1246,74 @@ input[type="range"]::-moz-range-thumb {
|
||||
[data-theme="dark"] .standalone-arrow-section .section-header h4 {
|
||||
color: #f5f1e8;
|
||||
}
|
||||
|
||||
/* Legenden-Modal mit Vorschau */
|
||||
.modal-wide {
|
||||
max-width: 1000px;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.legend-modal-body {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.legend-editor {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.legend-editor h3,
|
||||
.legend-preview-section h3 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1rem;
|
||||
color: #374151;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.legend-preview-section {
|
||||
flex: 0 0 350px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.legend-preview-box {
|
||||
flex: 1;
|
||||
background: #ffffff;
|
||||
border: 2px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
overflow: auto;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.legend-preview-box svg {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.legend-preview-actions {
|
||||
margin-top: 0.75rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.legend-preview-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #9ca3af;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.legend-modal-body {
|
||||
flex-direction: column;
|
||||
}
|
||||
.legend-preview-section {
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -159,7 +159,7 @@
|
||||
<div class="text-generator-row" id="arrowDetailsRow" style="display: none;">
|
||||
<div class="text-input-group">
|
||||
<label>Pfeil-Laenge:</label>
|
||||
<input type="range" id="arrowLength" min="20" max="100" value="40">
|
||||
<input type="range" id="arrowLength" min="20" max="200" value="40">
|
||||
<span id="arrowLengthValue">40px</span>
|
||||
</div>
|
||||
<div class="text-input-group">
|
||||
@@ -298,14 +298,26 @@
|
||||
|
||||
<!-- LEGENDE MODAL -->
|
||||
<div class="modal" id="legendModal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-content modal-wide">
|
||||
<div class="modal-header">
|
||||
<h2>Legende bearbeiten</h2>
|
||||
<button class="modal-close" onclick="closeLegendModal()">X</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="legend-items" id="legendItems">
|
||||
<!-- Legende-Eintraege werden per JavaScript eingefuegt -->
|
||||
<div class="modal-body legend-modal-body">
|
||||
<div class="legend-editor">
|
||||
<h3>Eintraege</h3>
|
||||
<div class="legend-items" id="legendItems">
|
||||
<!-- Legende-Eintraege werden per JavaScript eingefuegt -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="legend-preview-section">
|
||||
<h3>Vorschau</h3>
|
||||
<div class="legend-preview-box" id="legendPreviewBox">
|
||||
<!-- Vorschau wird per JavaScript generiert -->
|
||||
</div>
|
||||
<div class="legend-preview-actions">
|
||||
<button class="btn-action btn-copy" onclick="copyLegendAsImage()" title="Vorschau kopieren">Kopieren</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
@@ -379,7 +391,12 @@ document.addEventListener("keydown",function(e){if(e.key==="Escape"){closeImpres
|
||||
</script>
|
||||
|
||||
<script src="js/symbols.js?v=10"></script>
|
||||
<script src="js/text-generator.js?v=12"></script>
|
||||
<script src="lib/svg.min.js"></script>
|
||||
<script src="js/text-generator/state.js?v=1"></script>
|
||||
<script src="js/text-generator/svg-generator.js?v=7"></script>
|
||||
<script src="js/text-generator/ui-bindings.js?v=4"></script>
|
||||
<script src="js/text-generator/export.js?v=1"></script>
|
||||
<script>document.addEventListener("DOMContentLoaded", function() { UiBindings.init(); });</script>
|
||||
<script src="js/app.js?v=25"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,385 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Gutachter Symbolbibliothek v2.2</title>
|
||||
<link rel="stylesheet" href="css/styles.css?v=16">
|
||||
</head>
|
||||
<body>
|
||||
<!-- HEADER -->
|
||||
<header class="header">
|
||||
<div class="header-content">
|
||||
<h1>Gutachter Symbolbibliothek</h1>
|
||||
<p class="subtitle">SVG & DXF Symbole fuer Schadensgutachten und Vermessung</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button class="btn-header" onclick="openLegendModal()">
|
||||
Legende <span class="badge" id="legendCount">0</span>
|
||||
</button>
|
||||
<button class="btn-header" onclick="downloadAllAsZip()">
|
||||
Alle herunterladen
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- TEXT-GENERATOR v5 -->
|
||||
<div class="text-generator">
|
||||
<div class="text-generator-header" onclick="toggleTextGenerator()">
|
||||
<h3>Text-Symbol erstellen</h3>
|
||||
<div class="header-buttons">
|
||||
<button class="btn-reset" onclick="event.stopPropagation(); resetToDefaults();" title="Auf Standard zuruecksetzen">Reset</button>
|
||||
<button class="collapse-btn" id="collapseBtn">▼</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-generator-body" id="textGeneratorBody">
|
||||
<!-- Zeile 1: Text und Schriftgroesse -->
|
||||
<div class="text-generator-row">
|
||||
<div class="text-input-group text-input-wide">
|
||||
<label>Text:</label>
|
||||
<textarea id="customText" placeholder="Text eingeben... (Enter fuer neue Zeile)" rows="3"></textarea>
|
||||
</div>
|
||||
<div class="text-input-group">
|
||||
<label>Schriftgroesse:</label>
|
||||
<input type="range" id="fontSize" min="8" max="48" value="16">
|
||||
<span id="fontSizeValue">16px</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 2: Farben -->
|
||||
<div class="text-generator-row">
|
||||
<div class="text-input-group">
|
||||
<label>Textfarbe:</label>
|
||||
<div class="color-picker-wrap">
|
||||
<input type="color" id="textColor" value="#000000">
|
||||
<span class="color-value" id="textColorValue">#000000</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-input-group">
|
||||
<label>Rahmenfarbe:</label>
|
||||
<div class="color-picker-wrap">
|
||||
<input type="color" id="frameColor" value="#000000">
|
||||
<span class="color-value" id="frameColorValue">#000000</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 3: Rahmenform -->
|
||||
<div class="text-generator-row">
|
||||
<div class="text-input-group">
|
||||
<label>Rahmenform:</label>
|
||||
<div class="shape-options">
|
||||
<button class="shape-btn active" data-shape="none" title="Kein Rahmen">Keiner</button>
|
||||
<button class="shape-btn" data-shape="rect" title="Rechteck">Rechteck</button>
|
||||
<button class="shape-btn" data-shape="square" title="Quadrat">Quadrat</button>
|
||||
<button class="shape-btn" data-shape="circle" title="Kreis">Kreis</button>
|
||||
<button class="shape-btn" data-shape="oval" title="Oval">Oval</button>
|
||||
<button class="shape-btn" data-shape="diamond" title="Raute">Raute</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 4: Rahmen-Skalierung -->
|
||||
<div class="text-generator-row" id="frameScaleRow" style="display: none;">
|
||||
<div class="text-input-group">
|
||||
<label>Rahmen-Skalierung:</label>
|
||||
<input type="range" id="frameScale" min="100" max="300" value="100">
|
||||
<span id="frameScaleValue">100%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 4b: Gesamt-Padding -->
|
||||
<div class="text-generator-row" id="framePaddingAllRow" style="display: none;">
|
||||
<div class="text-input-group">
|
||||
<label>Gesamt-Padding (alle Kanten):</label>
|
||||
<input type="range" id="paddingAll" min="0" max="50" value="10">
|
||||
<span id="paddingAllValue">10px</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 4c: Separate Padding (4 Kanten) -->
|
||||
<div class="text-generator-row padding-row" id="framePaddingRow" style="display: none;">
|
||||
<div class="text-input-group padding-group">
|
||||
<label>Padding Oben:</label>
|
||||
<input type="range" id="paddingTop" min="0" max="50" value="10">
|
||||
<span id="paddingTopValue">10px</span>
|
||||
</div>
|
||||
<div class="text-input-group padding-group">
|
||||
<label>Rechts:</label>
|
||||
<input type="range" id="paddingRight" min="0" max="50" value="10">
|
||||
<span id="paddingRightValue">10px</span>
|
||||
</div>
|
||||
<div class="text-input-group padding-group">
|
||||
<label>Unten:</label>
|
||||
<input type="range" id="paddingBottom" min="0" max="50" value="10">
|
||||
<span id="paddingBottomValue">10px</span>
|
||||
</div>
|
||||
<div class="text-input-group padding-group">
|
||||
<label>Links:</label>
|
||||
<input type="range" id="paddingLeft" min="0" max="50" value="10">
|
||||
<span id="paddingLeftValue">10px</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 5: Linienstil und Staerke -->
|
||||
<div class="text-generator-row">
|
||||
<div class="text-input-group">
|
||||
<label>Linienstil:</label>
|
||||
<div class="line-style-options">
|
||||
<button class="line-btn active" data-style="solid" title="Durchgezogen">Durchgezogen</button>
|
||||
<button class="line-btn" data-style="dashed" title="Gestrichelt">Gestrichelt</button>
|
||||
<button class="line-btn" data-style="dotted" title="Gepunktet">Gepunktet</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-input-group">
|
||||
<label>Linienstaerke:</label>
|
||||
<div class="line-weight-options">
|
||||
<button class="weight-btn" data-weight="1" title="Duenn">Duenn</button>
|
||||
<button class="weight-btn active" data-weight="2" title="Mittel">Mittel</button>
|
||||
<button class="weight-btn" data-weight="3" title="Fett">Fett</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 6: Pfeil-Optionen -->
|
||||
<div class="text-generator-row">
|
||||
<div class="text-input-group">
|
||||
<label>Pfeil am Text:</label>
|
||||
<div class="arrow-options">
|
||||
<button class="arrow-btn active" data-arrow="none" title="Kein Pfeil">Keiner</button>
|
||||
<button class="arrow-btn" data-arrow="top" title="Pfeil oben">Oben</button>
|
||||
<button class="arrow-btn" data-arrow="right" title="Pfeil rechts">Rechts</button>
|
||||
<button class="arrow-btn" data-arrow="bottom" title="Pfeil unten">Unten</button>
|
||||
<button class="arrow-btn" data-arrow="left" title="Pfeil links">Links</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 7: Pfeil-Details (nur sichtbar wenn Pfeil aktiv) -->
|
||||
<div class="text-generator-row" id="arrowDetailsRow" style="display: none;">
|
||||
<div class="text-input-group">
|
||||
<label>Pfeil-Laenge:</label>
|
||||
<input type="range" id="arrowLength" min="20" max="100" value="40">
|
||||
<span id="arrowLengthValue">40px</span>
|
||||
</div>
|
||||
<div class="text-input-group">
|
||||
<label>Knick-Winkel:</label>
|
||||
<input type="range" id="arrowAngle" min="-90" max="90" value="0">
|
||||
<span id="arrowAngleValue">0°</span>
|
||||
</div>
|
||||
<div class="text-input-group">
|
||||
<label>Knick-Position:</label>
|
||||
<input type="range" id="arrowBend" min="0" max="100" value="50">
|
||||
<span id="arrowBendValue">50%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 7b: Pfeilspitzen-Details -->
|
||||
<div class="text-generator-row" id="arrowDetailsRow2" style="display: none;">
|
||||
<div class="text-input-group">
|
||||
<label>Pfeilspitzen-Breite:</label>
|
||||
<input type="range" id="arrowSize" min="5" max="30" value="10">
|
||||
<span id="arrowSizeValue">10px</span>
|
||||
</div>
|
||||
<div class="text-input-group">
|
||||
<label>Pfeilspitzen-Laenge:</label>
|
||||
<input type="range" id="arrowTipLength" min="5" max="40" value="15">
|
||||
<span id="arrowTipLengthValue">15px</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vorschau -->
|
||||
<div class="text-generator-preview">
|
||||
<div class="preview-label">Vorschau:</div>
|
||||
<div class="preview-box" id="textPreview">
|
||||
<!-- SVG Preview -->
|
||||
</div>
|
||||
<div class="preview-actions">
|
||||
<button class="btn-action btn-copy" onclick="copyTextAsImage()" title="Als Bild kopieren">
|
||||
Kopieren
|
||||
</button>
|
||||
<button class="btn-action btn-svg" onclick="downloadTextSVG()" title="SVG herunterladen">
|
||||
SVG
|
||||
</button>
|
||||
<button class="btn-action btn-png" onclick="downloadTextPNG()" title="PNG herunterladen (transparent)">
|
||||
PNG
|
||||
</button>
|
||||
<button class="btn-action btn-jpg" onclick="downloadTextJPG()" title="JPG herunterladen">
|
||||
JPG
|
||||
</button>
|
||||
<button class="btn-action btn-dxf" onclick="downloadTextDXF()" title="DXF herunterladen">
|
||||
DXF
|
||||
</button>
|
||||
<button class="btn-action btn-legend" onclick="addTextToLegend()" title="Zur Legende hinzufuegen">
|
||||
Legende
|
||||
</button>
|
||||
<button class="btn-action btn-save" onclick="openSaveModal()" title="Als eigenes Symbol speichern">
|
||||
Speichern
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Einzelner Pfeil (Standalone Arrow) -->
|
||||
<div class="standalone-arrow-section">
|
||||
<div class="section-header">
|
||||
<h4>Einzelner Pfeil (ohne Text)</h4>
|
||||
<span class="section-hint">Verwendet die gleichen Pfeil-Einstellungen</span>
|
||||
</div>
|
||||
<div class="standalone-arrow-content">
|
||||
<div class="preview-box standalone-arrow-preview" id="standaloneArrowPreview">
|
||||
<!-- Pfeil-SVG Preview -->
|
||||
</div>
|
||||
<div class="preview-actions">
|
||||
<button class="btn-action btn-copy" onclick="copyStandaloneArrow()" title="Pfeil kopieren">
|
||||
Kopieren
|
||||
</button>
|
||||
<button class="btn-action btn-svg" onclick="downloadStandaloneArrowSVG()" title="SVG">
|
||||
SVG
|
||||
</button>
|
||||
<button class="btn-action btn-png" onclick="downloadStandaloneArrowPNG()" title="PNG">
|
||||
PNG
|
||||
</button>
|
||||
<button class="btn-action btn-jpg" onclick="downloadStandaloneArrowJPG()" title="JPG">
|
||||
JPG
|
||||
</button>
|
||||
<button class="btn-action btn-dxf" onclick="downloadStandaloneArrowDXF()" title="DXF">
|
||||
DXF
|
||||
</button>
|
||||
<button class="btn-action btn-legend" onclick="addStandaloneArrowToLegend()" title="Zur Legende">
|
||||
Legende
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SUCHE & FILTER -->
|
||||
<div class="search-container">
|
||||
<div class="search-box">
|
||||
<input type="text" id="searchInput" placeholder="Symbole suchen... (z.B. Schaden, Hydrant, Mast)">
|
||||
<span class="search-icon">🔍</span>
|
||||
</div>
|
||||
|
||||
<div class="filter-pills">
|
||||
<button class="filter-pill active" data-filter="all">Alle</button>
|
||||
<span class="filter-divider">|</span>
|
||||
<span class="filter-label">Gutachten:</span>
|
||||
<button class="filter-pill" data-filter="schaeden">Schaeden</button>
|
||||
<button class="filter-pill" data-filter="werkzeuge">Werkzeuge</button>
|
||||
<button class="filter-pill" data-filter="bauteile">Bauteile</button>
|
||||
<button class="filter-pill" data-filter="moebel">Moebel</button>
|
||||
<button class="filter-pill" data-filter="bad">Bad</button>
|
||||
<button class="filter-pill" data-filter="kueche">Kueche</button>
|
||||
<button class="filter-pill" data-filter="pfeile">Pfeile</button>
|
||||
<button class="filter-pill" data-filter="kompass">Kompass</button>
|
||||
<span class="filter-divider">|</span>
|
||||
<span class="filter-label">Vermessung:</span>
|
||||
<button class="filter-pill" data-filter="vermessung_status">Status</button>
|
||||
<button class="filter-pill" data-filter="vermessung_grenzen">Grenzen</button>
|
||||
<button class="filter-pill" data-filter="vermessung_wasser">Wasser</button>
|
||||
<button class="filter-pill" data-filter="vermessung_abwasser">Abwasser</button>
|
||||
<button class="filter-pill" data-filter="vermessung_strom">Strom</button>
|
||||
<button class="filter-pill" data-filter="vermessung_gas">Gas</button>
|
||||
<button class="filter-pill" data-filter="vermessung_verkehr">Verkehr</button>
|
||||
<button class="filter-pill" data-filter="vermessung_topografie">Topografie</button>
|
||||
<span class="filter-divider">|</span>
|
||||
<span class="filter-label">Eigene:</span>
|
||||
<button class="filter-pill" data-filter="custom">Meine Symbole</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SYMBOL-GRID -->
|
||||
<main class="main-content">
|
||||
<div class="symbol-grid" id="symbolGrid">
|
||||
<!-- Symbole werden per JavaScript eingefuegt -->
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- LEGENDE MODAL -->
|
||||
<div class="modal" id="legendModal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>Legende bearbeiten</h2>
|
||||
<button class="modal-close" onclick="closeLegendModal()">X</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="legend-items" id="legendItems">
|
||||
<!-- Legende-Eintraege werden per JavaScript eingefuegt -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn-secondary" onclick="clearLegend()">Leeren</button>
|
||||
<button class="btn-secondary" onclick="exportLegendSVG()">SVG</button>
|
||||
<button class="btn-secondary" onclick="exportLegendPNG()">PNG</button>
|
||||
<button class="btn-primary" onclick="closeLegendModal()">Schliessen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SAVE MODAL -->
|
||||
<div class="modal" id="saveModal">
|
||||
<div class="modal-content modal-small">
|
||||
<div class="modal-header">
|
||||
<h2>Symbol speichern</h2>
|
||||
<button class="modal-close" onclick="closeSaveModal()">X</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="save-form">
|
||||
<div class="form-group">
|
||||
<label for="symbolName">Symbolname:</label>
|
||||
<input type="text" id="symbolName" placeholder="z.B. Hinweis Wasserschaden">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="symbolDescription">Beschreibung (optional):</label>
|
||||
<input type="text" id="symbolDescription" placeholder="Kurze Beschreibung...">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn-secondary" onclick="closeSaveModal()">Abbrechen</button>
|
||||
<button class="btn-primary" onclick="saveCustomSymbol()">Speichern</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- IMPRESSUM MODAL -->
|
||||
<div class="legal-modal" id="impressumModal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:9999;align-items:center;justify-content:center;">
|
||||
<div style="background:white;width:90%;max-width:900px;height:90vh;border-radius:12px;margin:20px;overflow:hidden;display:flex;flex-direction:column;">
|
||||
<div style="padding:0.75rem 1.5rem;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;">
|
||||
<h2 style="margin:0;font-size:1.25rem;color:#1f2937;">Impressum</h2>
|
||||
<button onclick="closeImpressum()" style="background:none;border:none;font-size:1.5rem;cursor:pointer;color:#6b7280;line-height:1;">×</button>
|
||||
</div>
|
||||
<iframe src="/legal/impressum.html" style="flex:1;width:100%;border:none;"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DATENSCHUTZ MODAL -->
|
||||
<div class="legal-modal" id="datenschutzModal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:9999;align-items:center;justify-content:center;">
|
||||
<div style="background:white;width:90%;max-width:900px;height:90vh;border-radius:12px;margin:20px;overflow:hidden;display:flex;flex-direction:column;">
|
||||
<div style="padding:0.75rem 1.5rem;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;">
|
||||
<h2 style="margin:0;font-size:1.25rem;color:#1f2937;">Datenschutz</h2>
|
||||
<button onclick="closeDatenschutz()" style="background:none;border:none;font-size:1.5rem;cursor:pointer;color:#6b7280;line-height:1;">×</button>
|
||||
</div>
|
||||
<iframe src="/legal/datenschutz.html" style="flex:1;width:100%;border:none;"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openImpressum(){document.getElementById("impressumModal").style.display="flex";}
|
||||
function closeImpressum(){document.getElementById("impressumModal").style.display="none";}
|
||||
function openDatenschutz(){document.getElementById("datenschutzModal").style.display="flex";}
|
||||
function closeDatenschutz(){document.getElementById("datenschutzModal").style.display="none";}
|
||||
document.addEventListener("keydown",function(e){if(e.key==="Escape"){closeImpressum();closeDatenschutz();}});
|
||||
["impressumModal","datenschutzModal"].forEach(function(id){
|
||||
var el=document.getElementById(id);
|
||||
if(el)el.addEventListener("click",function(e){if(e.target===this)this.style.display="none";});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="js/symbols.js?v=10"></script>
|
||||
<script src="js/text-generator.js?v=12"></script>
|
||||
<script src="js/app.js?v=25"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,385 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Gutachter Symbolbibliothek v2.2</title>
|
||||
<link rel="stylesheet" href="css/styles.css?v=16">
|
||||
</head>
|
||||
<body>
|
||||
<!-- HEADER -->
|
||||
<header class="header">
|
||||
<div class="header-content">
|
||||
<h1>Gutachter Symbolbibliothek</h1>
|
||||
<p class="subtitle">SVG & DXF Symbole fuer Schadensgutachten und Vermessung</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button class="btn-header" onclick="openLegendModal()">
|
||||
Legende <span class="badge" id="legendCount">0</span>
|
||||
</button>
|
||||
<button class="btn-header" onclick="downloadAllAsZip()">
|
||||
Alle herunterladen
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- TEXT-GENERATOR v5 -->
|
||||
<div class="text-generator">
|
||||
<div class="text-generator-header" onclick="toggleTextGenerator()">
|
||||
<h3>Text-Symbol erstellen</h3>
|
||||
<div class="header-buttons">
|
||||
<button class="btn-reset" onclick="event.stopPropagation(); resetToDefaults();" title="Auf Standard zuruecksetzen">Reset</button>
|
||||
<button class="collapse-btn" id="collapseBtn">▼</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-generator-body" id="textGeneratorBody">
|
||||
<!-- Zeile 1: Text und Schriftgroesse -->
|
||||
<div class="text-generator-row">
|
||||
<div class="text-input-group text-input-wide">
|
||||
<label>Text:</label>
|
||||
<textarea id="customText" placeholder="Text eingeben... (Enter fuer neue Zeile)" rows="3"></textarea>
|
||||
</div>
|
||||
<div class="text-input-group">
|
||||
<label>Schriftgroesse:</label>
|
||||
<input type="range" id="fontSize" min="8" max="48" value="16">
|
||||
<span id="fontSizeValue">16px</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 2: Farben -->
|
||||
<div class="text-generator-row">
|
||||
<div class="text-input-group">
|
||||
<label>Textfarbe:</label>
|
||||
<div class="color-picker-wrap">
|
||||
<input type="color" id="textColor" value="#000000">
|
||||
<span class="color-value" id="textColorValue">#000000</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-input-group">
|
||||
<label>Rahmenfarbe:</label>
|
||||
<div class="color-picker-wrap">
|
||||
<input type="color" id="frameColor" value="#000000">
|
||||
<span class="color-value" id="frameColorValue">#000000</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 3: Rahmenform -->
|
||||
<div class="text-generator-row">
|
||||
<div class="text-input-group">
|
||||
<label>Rahmenform:</label>
|
||||
<div class="shape-options">
|
||||
<button class="shape-btn active" data-shape="none" title="Kein Rahmen">Keiner</button>
|
||||
<button class="shape-btn" data-shape="rect" title="Rechteck">Rechteck</button>
|
||||
<button class="shape-btn" data-shape="square" title="Quadrat">Quadrat</button>
|
||||
<button class="shape-btn" data-shape="circle" title="Kreis">Kreis</button>
|
||||
<button class="shape-btn" data-shape="oval" title="Oval">Oval</button>
|
||||
<button class="shape-btn" data-shape="diamond" title="Raute">Raute</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 4: Rahmen-Skalierung -->
|
||||
<div class="text-generator-row" id="frameScaleRow" style="display: none;">
|
||||
<div class="text-input-group">
|
||||
<label>Rahmen-Skalierung:</label>
|
||||
<input type="range" id="frameScale" min="100" max="300" value="100">
|
||||
<span id="frameScaleValue">100%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 4b: Gesamt-Padding -->
|
||||
<div class="text-generator-row" id="framePaddingAllRow">
|
||||
<div class="text-input-group">
|
||||
<label>Gesamt-Padding (alle Kanten):</label>
|
||||
<input type="range" id="paddingAll" min="0" max="50" value="10">
|
||||
<span id="paddingAllValue">10px</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 4c: Separate Padding (4 Kanten) -->
|
||||
<div class="text-generator-row padding-row" id="framePaddingRow">
|
||||
<div class="text-input-group padding-group">
|
||||
<label>Padding Oben:</label>
|
||||
<input type="range" id="paddingTop" min="0" max="50" value="10">
|
||||
<span id="paddingTopValue">10px</span>
|
||||
</div>
|
||||
<div class="text-input-group padding-group">
|
||||
<label>Rechts:</label>
|
||||
<input type="range" id="paddingRight" min="0" max="50" value="10">
|
||||
<span id="paddingRightValue">10px</span>
|
||||
</div>
|
||||
<div class="text-input-group padding-group">
|
||||
<label>Unten:</label>
|
||||
<input type="range" id="paddingBottom" min="0" max="50" value="10">
|
||||
<span id="paddingBottomValue">10px</span>
|
||||
</div>
|
||||
<div class="text-input-group padding-group">
|
||||
<label>Links:</label>
|
||||
<input type="range" id="paddingLeft" min="0" max="50" value="10">
|
||||
<span id="paddingLeftValue">10px</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 5: Linienstil und Staerke -->
|
||||
<div class="text-generator-row">
|
||||
<div class="text-input-group">
|
||||
<label>Linienstil:</label>
|
||||
<div class="line-style-options">
|
||||
<button class="line-btn active" data-style="solid" title="Durchgezogen">Durchgezogen</button>
|
||||
<button class="line-btn" data-style="dashed" title="Gestrichelt">Gestrichelt</button>
|
||||
<button class="line-btn" data-style="dotted" title="Gepunktet">Gepunktet</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-input-group">
|
||||
<label>Linienstaerke:</label>
|
||||
<div class="line-weight-options">
|
||||
<button class="weight-btn" data-weight="1" title="Duenn">Duenn</button>
|
||||
<button class="weight-btn active" data-weight="2" title="Mittel">Mittel</button>
|
||||
<button class="weight-btn" data-weight="3" title="Fett">Fett</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 6: Pfeil-Optionen -->
|
||||
<div class="text-generator-row">
|
||||
<div class="text-input-group">
|
||||
<label>Pfeil am Text:</label>
|
||||
<div class="arrow-options">
|
||||
<button class="arrow-btn active" data-arrow="none" title="Kein Pfeil">Keiner</button>
|
||||
<button class="arrow-btn" data-arrow="top" title="Pfeil oben">Oben</button>
|
||||
<button class="arrow-btn" data-arrow="right" title="Pfeil rechts">Rechts</button>
|
||||
<button class="arrow-btn" data-arrow="bottom" title="Pfeil unten">Unten</button>
|
||||
<button class="arrow-btn" data-arrow="left" title="Pfeil links">Links</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 7: Pfeil-Details (nur sichtbar wenn Pfeil aktiv) -->
|
||||
<div class="text-generator-row" id="arrowDetailsRow" style="display: none;">
|
||||
<div class="text-input-group">
|
||||
<label>Pfeil-Laenge:</label>
|
||||
<input type="range" id="arrowLength" min="20" max="200" value="40">
|
||||
<span id="arrowLengthValue">40px</span>
|
||||
</div>
|
||||
<div class="text-input-group">
|
||||
<label>Knick-Winkel:</label>
|
||||
<input type="range" id="arrowAngle" min="-90" max="90" value="0">
|
||||
<span id="arrowAngleValue">0°</span>
|
||||
</div>
|
||||
<div class="text-input-group">
|
||||
<label>Knick-Position:</label>
|
||||
<input type="range" id="arrowBend" min="0" max="100" value="50">
|
||||
<span id="arrowBendValue">50%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 7b: Pfeilspitzen-Details -->
|
||||
<div class="text-generator-row" id="arrowDetailsRow2">
|
||||
<div class="text-input-group">
|
||||
<label>Pfeilspitzen-Breite:</label>
|
||||
<input type="range" id="arrowSize" min="5" max="30" value="10">
|
||||
<span id="arrowSizeValue">10px</span>
|
||||
</div>
|
||||
<div class="text-input-group">
|
||||
<label>Pfeilspitzen-Laenge:</label>
|
||||
<input type="range" id="arrowTipLength" min="5" max="40" value="15">
|
||||
<span id="arrowTipLengthValue">15px</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vorschau -->
|
||||
<div class="text-generator-preview">
|
||||
<div class="preview-label">Vorschau:</div>
|
||||
<div class="preview-box" id="textPreview">
|
||||
<!-- SVG Preview -->
|
||||
</div>
|
||||
<div class="preview-actions">
|
||||
<button class="btn-action btn-copy" onclick="copyTextAsImage()" title="Als Bild kopieren">
|
||||
Kopieren
|
||||
</button>
|
||||
<button class="btn-action btn-svg" onclick="downloadTextSVG()" title="SVG herunterladen">
|
||||
SVG
|
||||
</button>
|
||||
<button class="btn-action btn-png" onclick="downloadTextPNG()" title="PNG herunterladen (transparent)">
|
||||
PNG
|
||||
</button>
|
||||
<button class="btn-action btn-jpg" onclick="downloadTextJPG()" title="JPG herunterladen">
|
||||
JPG
|
||||
</button>
|
||||
<button class="btn-action btn-dxf" onclick="downloadTextDXF()" title="DXF herunterladen">
|
||||
DXF
|
||||
</button>
|
||||
<button class="btn-action btn-legend" onclick="addTextToLegend()" title="Zur Legende hinzufuegen">
|
||||
Legende
|
||||
</button>
|
||||
<button class="btn-action btn-save" onclick="openSaveModal()" title="Als eigenes Symbol speichern">
|
||||
Speichern
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Einzelner Pfeil (Standalone Arrow) -->
|
||||
<div class="standalone-arrow-section">
|
||||
<div class="section-header">
|
||||
<h4>Einzelner Pfeil (ohne Text)</h4>
|
||||
<span class="section-hint">Verwendet die gleichen Pfeil-Einstellungen</span>
|
||||
</div>
|
||||
<div class="standalone-arrow-content">
|
||||
<div class="preview-box standalone-arrow-preview" id="standaloneArrowPreview">
|
||||
<!-- Pfeil-SVG Preview -->
|
||||
</div>
|
||||
<div class="preview-actions">
|
||||
<button class="btn-action btn-copy" onclick="copyStandaloneArrow()" title="Pfeil kopieren">
|
||||
Kopieren
|
||||
</button>
|
||||
<button class="btn-action btn-svg" onclick="downloadStandaloneArrowSVG()" title="SVG">
|
||||
SVG
|
||||
</button>
|
||||
<button class="btn-action btn-png" onclick="downloadStandaloneArrowPNG()" title="PNG">
|
||||
PNG
|
||||
</button>
|
||||
<button class="btn-action btn-jpg" onclick="downloadStandaloneArrowJPG()" title="JPG">
|
||||
JPG
|
||||
</button>
|
||||
<button class="btn-action btn-dxf" onclick="downloadStandaloneArrowDXF()" title="DXF">
|
||||
DXF
|
||||
</button>
|
||||
<button class="btn-action btn-legend" onclick="addStandaloneArrowToLegend()" title="Zur Legende">
|
||||
Legende
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SUCHE & FILTER -->
|
||||
<div class="search-container">
|
||||
<div class="search-box">
|
||||
<input type="text" id="searchInput" placeholder="Symbole suchen... (z.B. Schaden, Hydrant, Mast)">
|
||||
<span class="search-icon">🔍</span>
|
||||
</div>
|
||||
|
||||
<div class="filter-pills">
|
||||
<button class="filter-pill active" data-filter="all">Alle</button>
|
||||
<span class="filter-divider">|</span>
|
||||
<span class="filter-label">Gutachten:</span>
|
||||
<button class="filter-pill" data-filter="schaeden">Schaeden</button>
|
||||
<button class="filter-pill" data-filter="werkzeuge">Werkzeuge</button>
|
||||
<button class="filter-pill" data-filter="bauteile">Bauteile</button>
|
||||
<button class="filter-pill" data-filter="moebel">Moebel</button>
|
||||
<button class="filter-pill" data-filter="bad">Bad</button>
|
||||
<button class="filter-pill" data-filter="kueche">Kueche</button>
|
||||
<button class="filter-pill" data-filter="pfeile">Pfeile</button>
|
||||
<button class="filter-pill" data-filter="kompass">Kompass</button>
|
||||
<span class="filter-divider">|</span>
|
||||
<span class="filter-label">Vermessung:</span>
|
||||
<button class="filter-pill" data-filter="vermessung_status">Status</button>
|
||||
<button class="filter-pill" data-filter="vermessung_grenzen">Grenzen</button>
|
||||
<button class="filter-pill" data-filter="vermessung_wasser">Wasser</button>
|
||||
<button class="filter-pill" data-filter="vermessung_abwasser">Abwasser</button>
|
||||
<button class="filter-pill" data-filter="vermessung_strom">Strom</button>
|
||||
<button class="filter-pill" data-filter="vermessung_gas">Gas</button>
|
||||
<button class="filter-pill" data-filter="vermessung_verkehr">Verkehr</button>
|
||||
<button class="filter-pill" data-filter="vermessung_topografie">Topografie</button>
|
||||
<span class="filter-divider">|</span>
|
||||
<span class="filter-label">Eigene:</span>
|
||||
<button class="filter-pill" data-filter="custom">Meine Symbole</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SYMBOL-GRID -->
|
||||
<main class="main-content">
|
||||
<div class="symbol-grid" id="symbolGrid">
|
||||
<!-- Symbole werden per JavaScript eingefuegt -->
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- LEGENDE MODAL -->
|
||||
<div class="modal" id="legendModal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>Legende bearbeiten</h2>
|
||||
<button class="modal-close" onclick="closeLegendModal()">X</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="legend-items" id="legendItems">
|
||||
<!-- Legende-Eintraege werden per JavaScript eingefuegt -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn-secondary" onclick="clearLegend()">Leeren</button>
|
||||
<button class="btn-secondary" onclick="exportLegendSVG()">SVG</button>
|
||||
<button class="btn-secondary" onclick="exportLegendPNG()">PNG</button>
|
||||
<button class="btn-primary" onclick="closeLegendModal()">Schliessen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SAVE MODAL -->
|
||||
<div class="modal" id="saveModal">
|
||||
<div class="modal-content modal-small">
|
||||
<div class="modal-header">
|
||||
<h2>Symbol speichern</h2>
|
||||
<button class="modal-close" onclick="closeSaveModal()">X</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="save-form">
|
||||
<div class="form-group">
|
||||
<label for="symbolName">Symbolname:</label>
|
||||
<input type="text" id="symbolName" placeholder="z.B. Hinweis Wasserschaden">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="symbolDescription">Beschreibung (optional):</label>
|
||||
<input type="text" id="symbolDescription" placeholder="Kurze Beschreibung...">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn-secondary" onclick="closeSaveModal()">Abbrechen</button>
|
||||
<button class="btn-primary" onclick="saveCustomSymbol()">Speichern</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- IMPRESSUM MODAL -->
|
||||
<div class="legal-modal" id="impressumModal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:9999;align-items:center;justify-content:center;">
|
||||
<div style="background:white;width:90%;max-width:900px;height:90vh;border-radius:12px;margin:20px;overflow:hidden;display:flex;flex-direction:column;">
|
||||
<div style="padding:0.75rem 1.5rem;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;">
|
||||
<h2 style="margin:0;font-size:1.25rem;color:#1f2937;">Impressum</h2>
|
||||
<button onclick="closeImpressum()" style="background:none;border:none;font-size:1.5rem;cursor:pointer;color:#6b7280;line-height:1;">×</button>
|
||||
</div>
|
||||
<iframe src="/legal/impressum.html" style="flex:1;width:100%;border:none;"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DATENSCHUTZ MODAL -->
|
||||
<div class="legal-modal" id="datenschutzModal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:9999;align-items:center;justify-content:center;">
|
||||
<div style="background:white;width:90%;max-width:900px;height:90vh;border-radius:12px;margin:20px;overflow:hidden;display:flex;flex-direction:column;">
|
||||
<div style="padding:0.75rem 1.5rem;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;">
|
||||
<h2 style="margin:0;font-size:1.25rem;color:#1f2937;">Datenschutz</h2>
|
||||
<button onclick="closeDatenschutz()" style="background:none;border:none;font-size:1.5rem;cursor:pointer;color:#6b7280;line-height:1;">×</button>
|
||||
</div>
|
||||
<iframe src="/legal/datenschutz.html" style="flex:1;width:100%;border:none;"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openImpressum(){document.getElementById("impressumModal").style.display="flex";}
|
||||
function closeImpressum(){document.getElementById("impressumModal").style.display="none";}
|
||||
function openDatenschutz(){document.getElementById("datenschutzModal").style.display="flex";}
|
||||
function closeDatenschutz(){document.getElementById("datenschutzModal").style.display="none";}
|
||||
document.addEventListener("keydown",function(e){if(e.key==="Escape"){closeImpressum();closeDatenschutz();}});
|
||||
["impressumModal","datenschutzModal"].forEach(function(id){
|
||||
var el=document.getElementById(id);
|
||||
if(el)el.addEventListener("click",function(e){if(e.target===this)this.style.display="none";});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="js/symbols.js?v=10"></script>
|
||||
<script src="js/text-generator.js?v=15"></script>
|
||||
<script src="js/app.js?v=25"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,390 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Gutachter Symbolbibliothek v2.2</title>
|
||||
<link rel="stylesheet" href="css/styles.css?v=16">
|
||||
</head>
|
||||
<body>
|
||||
<!-- HEADER -->
|
||||
<header class="header">
|
||||
<div class="header-content">
|
||||
<h1>Gutachter Symbolbibliothek</h1>
|
||||
<p class="subtitle">SVG & DXF Symbole fuer Schadensgutachten und Vermessung</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button class="btn-header" onclick="openLegendModal()">
|
||||
Legende <span class="badge" id="legendCount">0</span>
|
||||
</button>
|
||||
<button class="btn-header" onclick="downloadAllAsZip()">
|
||||
Alle herunterladen
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- TEXT-GENERATOR v5 -->
|
||||
<div class="text-generator">
|
||||
<div class="text-generator-header" onclick="toggleTextGenerator()">
|
||||
<h3>Text-Symbol erstellen</h3>
|
||||
<div class="header-buttons">
|
||||
<button class="btn-reset" onclick="event.stopPropagation(); resetToDefaults();" title="Auf Standard zuruecksetzen">Reset</button>
|
||||
<button class="collapse-btn" id="collapseBtn">▼</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-generator-body" id="textGeneratorBody">
|
||||
<!-- Zeile 1: Text und Schriftgroesse -->
|
||||
<div class="text-generator-row">
|
||||
<div class="text-input-group text-input-wide">
|
||||
<label>Text:</label>
|
||||
<textarea id="customText" placeholder="Text eingeben... (Enter fuer neue Zeile)" rows="3"></textarea>
|
||||
</div>
|
||||
<div class="text-input-group">
|
||||
<label>Schriftgroesse:</label>
|
||||
<input type="range" id="fontSize" min="8" max="48" value="16">
|
||||
<span id="fontSizeValue">16px</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 2: Farben -->
|
||||
<div class="text-generator-row">
|
||||
<div class="text-input-group">
|
||||
<label>Textfarbe:</label>
|
||||
<div class="color-picker-wrap">
|
||||
<input type="color" id="textColor" value="#000000">
|
||||
<span class="color-value" id="textColorValue">#000000</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-input-group">
|
||||
<label>Rahmenfarbe:</label>
|
||||
<div class="color-picker-wrap">
|
||||
<input type="color" id="frameColor" value="#000000">
|
||||
<span class="color-value" id="frameColorValue">#000000</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 3: Rahmenform -->
|
||||
<div class="text-generator-row">
|
||||
<div class="text-input-group">
|
||||
<label>Rahmenform:</label>
|
||||
<div class="shape-options">
|
||||
<button class="shape-btn active" data-shape="none" title="Kein Rahmen">Keiner</button>
|
||||
<button class="shape-btn" data-shape="rect" title="Rechteck">Rechteck</button>
|
||||
<button class="shape-btn" data-shape="square" title="Quadrat">Quadrat</button>
|
||||
<button class="shape-btn" data-shape="circle" title="Kreis">Kreis</button>
|
||||
<button class="shape-btn" data-shape="oval" title="Oval">Oval</button>
|
||||
<button class="shape-btn" data-shape="diamond" title="Raute">Raute</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 4: Rahmen-Skalierung -->
|
||||
<div class="text-generator-row" id="frameScaleRow" style="display: none;">
|
||||
<div class="text-input-group">
|
||||
<label>Rahmen-Skalierung:</label>
|
||||
<input type="range" id="frameScale" min="100" max="300" value="100">
|
||||
<span id="frameScaleValue">100%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 4b: Gesamt-Padding -->
|
||||
<div class="text-generator-row" id="framePaddingAllRow">
|
||||
<div class="text-input-group">
|
||||
<label>Gesamt-Padding (alle Kanten):</label>
|
||||
<input type="range" id="paddingAll" min="0" max="50" value="10">
|
||||
<span id="paddingAllValue">10px</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 4c: Separate Padding (4 Kanten) -->
|
||||
<div class="text-generator-row padding-row" id="framePaddingRow">
|
||||
<div class="text-input-group padding-group">
|
||||
<label>Padding Oben:</label>
|
||||
<input type="range" id="paddingTop" min="0" max="50" value="10">
|
||||
<span id="paddingTopValue">10px</span>
|
||||
</div>
|
||||
<div class="text-input-group padding-group">
|
||||
<label>Rechts:</label>
|
||||
<input type="range" id="paddingRight" min="0" max="50" value="10">
|
||||
<span id="paddingRightValue">10px</span>
|
||||
</div>
|
||||
<div class="text-input-group padding-group">
|
||||
<label>Unten:</label>
|
||||
<input type="range" id="paddingBottom" min="0" max="50" value="10">
|
||||
<span id="paddingBottomValue">10px</span>
|
||||
</div>
|
||||
<div class="text-input-group padding-group">
|
||||
<label>Links:</label>
|
||||
<input type="range" id="paddingLeft" min="0" max="50" value="10">
|
||||
<span id="paddingLeftValue">10px</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 5: Linienstil und Staerke -->
|
||||
<div class="text-generator-row">
|
||||
<div class="text-input-group">
|
||||
<label>Linienstil:</label>
|
||||
<div class="line-style-options">
|
||||
<button class="line-btn active" data-style="solid" title="Durchgezogen">Durchgezogen</button>
|
||||
<button class="line-btn" data-style="dashed" title="Gestrichelt">Gestrichelt</button>
|
||||
<button class="line-btn" data-style="dotted" title="Gepunktet">Gepunktet</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-input-group">
|
||||
<label>Linienstaerke:</label>
|
||||
<div class="line-weight-options">
|
||||
<button class="weight-btn" data-weight="1" title="Duenn">Duenn</button>
|
||||
<button class="weight-btn active" data-weight="2" title="Mittel">Mittel</button>
|
||||
<button class="weight-btn" data-weight="3" title="Fett">Fett</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 6: Pfeil-Optionen -->
|
||||
<div class="text-generator-row">
|
||||
<div class="text-input-group">
|
||||
<label>Pfeil am Text:</label>
|
||||
<div class="arrow-options">
|
||||
<button class="arrow-btn active" data-arrow="none" title="Kein Pfeil">Keiner</button>
|
||||
<button class="arrow-btn" data-arrow="top" title="Pfeil oben">Oben</button>
|
||||
<button class="arrow-btn" data-arrow="right" title="Pfeil rechts">Rechts</button>
|
||||
<button class="arrow-btn" data-arrow="bottom" title="Pfeil unten">Unten</button>
|
||||
<button class="arrow-btn" data-arrow="left" title="Pfeil links">Links</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 7: Pfeil-Details (nur sichtbar wenn Pfeil aktiv) -->
|
||||
<div class="text-generator-row" id="arrowDetailsRow" style="display: none;">
|
||||
<div class="text-input-group">
|
||||
<label>Pfeil-Laenge:</label>
|
||||
<input type="range" id="arrowLength" min="20" max="200" value="40">
|
||||
<span id="arrowLengthValue">40px</span>
|
||||
</div>
|
||||
<div class="text-input-group">
|
||||
<label>Knick-Winkel:</label>
|
||||
<input type="range" id="arrowAngle" min="-90" max="90" value="0">
|
||||
<span id="arrowAngleValue">0°</span>
|
||||
</div>
|
||||
<div class="text-input-group">
|
||||
<label>Knick-Position:</label>
|
||||
<input type="range" id="arrowBend" min="0" max="100" value="50">
|
||||
<span id="arrowBendValue">50%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zeile 7b: Pfeilspitzen-Details -->
|
||||
<div class="text-generator-row" id="arrowDetailsRow2">
|
||||
<div class="text-input-group">
|
||||
<label>Pfeilspitzen-Breite:</label>
|
||||
<input type="range" id="arrowSize" min="5" max="30" value="10">
|
||||
<span id="arrowSizeValue">10px</span>
|
||||
</div>
|
||||
<div class="text-input-group">
|
||||
<label>Pfeilspitzen-Laenge:</label>
|
||||
<input type="range" id="arrowTipLength" min="5" max="40" value="15">
|
||||
<span id="arrowTipLengthValue">15px</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vorschau -->
|
||||
<div class="text-generator-preview">
|
||||
<div class="preview-label">Vorschau:</div>
|
||||
<div class="preview-box" id="textPreview">
|
||||
<!-- SVG Preview -->
|
||||
</div>
|
||||
<div class="preview-actions">
|
||||
<button class="btn-action btn-copy" onclick="copyTextAsImage()" title="Als Bild kopieren">
|
||||
Kopieren
|
||||
</button>
|
||||
<button class="btn-action btn-svg" onclick="downloadTextSVG()" title="SVG herunterladen">
|
||||
SVG
|
||||
</button>
|
||||
<button class="btn-action btn-png" onclick="downloadTextPNG()" title="PNG herunterladen (transparent)">
|
||||
PNG
|
||||
</button>
|
||||
<button class="btn-action btn-jpg" onclick="downloadTextJPG()" title="JPG herunterladen">
|
||||
JPG
|
||||
</button>
|
||||
<button class="btn-action btn-dxf" onclick="downloadTextDXF()" title="DXF herunterladen">
|
||||
DXF
|
||||
</button>
|
||||
<button class="btn-action btn-legend" onclick="addTextToLegend()" title="Zur Legende hinzufuegen">
|
||||
Legende
|
||||
</button>
|
||||
<button class="btn-action btn-save" onclick="openSaveModal()" title="Als eigenes Symbol speichern">
|
||||
Speichern
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Einzelner Pfeil (Standalone Arrow) -->
|
||||
<div class="standalone-arrow-section">
|
||||
<div class="section-header">
|
||||
<h4>Einzelner Pfeil (ohne Text)</h4>
|
||||
<span class="section-hint">Verwendet die gleichen Pfeil-Einstellungen</span>
|
||||
</div>
|
||||
<div class="standalone-arrow-content">
|
||||
<div class="preview-box standalone-arrow-preview" id="standaloneArrowPreview">
|
||||
<!-- Pfeil-SVG Preview -->
|
||||
</div>
|
||||
<div class="preview-actions">
|
||||
<button class="btn-action btn-copy" onclick="copyStandaloneArrow()" title="Pfeil kopieren">
|
||||
Kopieren
|
||||
</button>
|
||||
<button class="btn-action btn-svg" onclick="downloadStandaloneArrowSVG()" title="SVG">
|
||||
SVG
|
||||
</button>
|
||||
<button class="btn-action btn-png" onclick="downloadStandaloneArrowPNG()" title="PNG">
|
||||
PNG
|
||||
</button>
|
||||
<button class="btn-action btn-jpg" onclick="downloadStandaloneArrowJPG()" title="JPG">
|
||||
JPG
|
||||
</button>
|
||||
<button class="btn-action btn-dxf" onclick="downloadStandaloneArrowDXF()" title="DXF">
|
||||
DXF
|
||||
</button>
|
||||
<button class="btn-action btn-legend" onclick="addStandaloneArrowToLegend()" title="Zur Legende">
|
||||
Legende
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SUCHE & FILTER -->
|
||||
<div class="search-container">
|
||||
<div class="search-box">
|
||||
<input type="text" id="searchInput" placeholder="Symbole suchen... (z.B. Schaden, Hydrant, Mast)">
|
||||
<span class="search-icon">🔍</span>
|
||||
</div>
|
||||
|
||||
<div class="filter-pills">
|
||||
<button class="filter-pill active" data-filter="all">Alle</button>
|
||||
<span class="filter-divider">|</span>
|
||||
<span class="filter-label">Gutachten:</span>
|
||||
<button class="filter-pill" data-filter="schaeden">Schaeden</button>
|
||||
<button class="filter-pill" data-filter="werkzeuge">Werkzeuge</button>
|
||||
<button class="filter-pill" data-filter="bauteile">Bauteile</button>
|
||||
<button class="filter-pill" data-filter="moebel">Moebel</button>
|
||||
<button class="filter-pill" data-filter="bad">Bad</button>
|
||||
<button class="filter-pill" data-filter="kueche">Kueche</button>
|
||||
<button class="filter-pill" data-filter="pfeile">Pfeile</button>
|
||||
<button class="filter-pill" data-filter="kompass">Kompass</button>
|
||||
<span class="filter-divider">|</span>
|
||||
<span class="filter-label">Vermessung:</span>
|
||||
<button class="filter-pill" data-filter="vermessung_status">Status</button>
|
||||
<button class="filter-pill" data-filter="vermessung_grenzen">Grenzen</button>
|
||||
<button class="filter-pill" data-filter="vermessung_wasser">Wasser</button>
|
||||
<button class="filter-pill" data-filter="vermessung_abwasser">Abwasser</button>
|
||||
<button class="filter-pill" data-filter="vermessung_strom">Strom</button>
|
||||
<button class="filter-pill" data-filter="vermessung_gas">Gas</button>
|
||||
<button class="filter-pill" data-filter="vermessung_verkehr">Verkehr</button>
|
||||
<button class="filter-pill" data-filter="vermessung_topografie">Topografie</button>
|
||||
<span class="filter-divider">|</span>
|
||||
<span class="filter-label">Eigene:</span>
|
||||
<button class="filter-pill" data-filter="custom">Meine Symbole</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SYMBOL-GRID -->
|
||||
<main class="main-content">
|
||||
<div class="symbol-grid" id="symbolGrid">
|
||||
<!-- Symbole werden per JavaScript eingefuegt -->
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- LEGENDE MODAL -->
|
||||
<div class="modal" id="legendModal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>Legende bearbeiten</h2>
|
||||
<button class="modal-close" onclick="closeLegendModal()">X</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="legend-items" id="legendItems">
|
||||
<!-- Legende-Eintraege werden per JavaScript eingefuegt -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn-secondary" onclick="clearLegend()">Leeren</button>
|
||||
<button class="btn-secondary" onclick="exportLegendSVG()">SVG</button>
|
||||
<button class="btn-secondary" onclick="exportLegendPNG()">PNG</button>
|
||||
<button class="btn-primary" onclick="closeLegendModal()">Schliessen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SAVE MODAL -->
|
||||
<div class="modal" id="saveModal">
|
||||
<div class="modal-content modal-small">
|
||||
<div class="modal-header">
|
||||
<h2>Symbol speichern</h2>
|
||||
<button class="modal-close" onclick="closeSaveModal()">X</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="save-form">
|
||||
<div class="form-group">
|
||||
<label for="symbolName">Symbolname:</label>
|
||||
<input type="text" id="symbolName" placeholder="z.B. Hinweis Wasserschaden">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="symbolDescription">Beschreibung (optional):</label>
|
||||
<input type="text" id="symbolDescription" placeholder="Kurze Beschreibung...">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn-secondary" onclick="closeSaveModal()">Abbrechen</button>
|
||||
<button class="btn-primary" onclick="saveCustomSymbol()">Speichern</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- IMPRESSUM MODAL -->
|
||||
<div class="legal-modal" id="impressumModal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:9999;align-items:center;justify-content:center;">
|
||||
<div style="background:white;width:90%;max-width:900px;height:90vh;border-radius:12px;margin:20px;overflow:hidden;display:flex;flex-direction:column;">
|
||||
<div style="padding:0.75rem 1.5rem;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;">
|
||||
<h2 style="margin:0;font-size:1.25rem;color:#1f2937;">Impressum</h2>
|
||||
<button onclick="closeImpressum()" style="background:none;border:none;font-size:1.5rem;cursor:pointer;color:#6b7280;line-height:1;">×</button>
|
||||
</div>
|
||||
<iframe src="/legal/impressum.html" style="flex:1;width:100%;border:none;"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DATENSCHUTZ MODAL -->
|
||||
<div class="legal-modal" id="datenschutzModal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:9999;align-items:center;justify-content:center;">
|
||||
<div style="background:white;width:90%;max-width:900px;height:90vh;border-radius:12px;margin:20px;overflow:hidden;display:flex;flex-direction:column;">
|
||||
<div style="padding:0.75rem 1.5rem;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;">
|
||||
<h2 style="margin:0;font-size:1.25rem;color:#1f2937;">Datenschutz</h2>
|
||||
<button onclick="closeDatenschutz()" style="background:none;border:none;font-size:1.5rem;cursor:pointer;color:#6b7280;line-height:1;">×</button>
|
||||
</div>
|
||||
<iframe src="/legal/datenschutz.html" style="flex:1;width:100%;border:none;"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openImpressum(){document.getElementById("impressumModal").style.display="flex";}
|
||||
function closeImpressum(){document.getElementById("impressumModal").style.display="none";}
|
||||
function openDatenschutz(){document.getElementById("datenschutzModal").style.display="flex";}
|
||||
function closeDatenschutz(){document.getElementById("datenschutzModal").style.display="none";}
|
||||
document.addEventListener("keydown",function(e){if(e.key==="Escape"){closeImpressum();closeDatenschutz();}});
|
||||
["impressumModal","datenschutzModal"].forEach(function(id){
|
||||
var el=document.getElementById(id);
|
||||
if(el)el.addEventListener("click",function(e){if(e.target===this)this.style.display="none";});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="js/symbols.js?v=10"></script>
|
||||
<script src="lib/svg.min.js"></script>
|
||||
<script src="js/text-generator/state.js?v=1"></script>
|
||||
<script src="js/text-generator/svg-generator.js?v=7"></script>
|
||||
<script src="js/text-generator/ui-bindings.js?v=4"></script>
|
||||
<script src="js/text-generator/export.js?v=1"></script>
|
||||
<script>document.addEventListener("DOMContentLoaded", function() { UiBindings.init(); });</script>
|
||||
<script src="js/app.js?v=25"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -445,6 +445,7 @@ function openLegendModal() {
|
||||
const modal = document.getElementById('legendModal');
|
||||
modal.classList.add('active');
|
||||
renderLegendEditor();
|
||||
updateLegendPreview();
|
||||
}
|
||||
|
||||
function closeLegendModal() {
|
||||
@@ -454,34 +455,38 @@ function closeLegendModal() {
|
||||
|
||||
function renderLegendEditor() {
|
||||
const container = document.getElementById('legendItems');
|
||||
|
||||
|
||||
if (legendItems.length === 0) {
|
||||
container.innerHTML = '<div class="legend-empty">Keine Symbole in der Legende. Klicken Sie auf 📑 bei einem Symbol, um es hinzuzufügen.</div>';
|
||||
updateLegendPreview();
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
container.innerHTML = legendItems.map((item, index) => `
|
||||
<div class="legend-item" data-index="${index}">
|
||||
<div class="legend-item-preview">${item.svg}</div>
|
||||
<div class="legend-item-content">
|
||||
<input type="text" class="legend-item-name" value="${item.name}"
|
||||
onchange="updateLegendItem(${index}, 'name', this.value)" placeholder="Name">
|
||||
<input type="text" class="legend-item-desc" value="${item.description || ''}"
|
||||
onchange="updateLegendItem(${index}, 'description', this.value)" placeholder="Beschreibung (optional)">
|
||||
<input type="text" class="legend-item-name" value="${item.name}"
|
||||
oninput="updateLegendItem(${index}, 'name', this.value)" placeholder="Name">
|
||||
<input type="text" class="legend-item-desc" value="${item.description || ''}"
|
||||
oninput="updateLegendItem(${index}, 'description', this.value)" placeholder="Beschreibung (optional)">
|
||||
</div>
|
||||
<div class="legend-item-actions">
|
||||
<button onclick="moveLegendItem(${index}, -1)" title="Nach oben" ${index === 0 ? 'disabled' : ''}>▲</button>
|
||||
<button onclick="moveLegendItem(${index}, 1)" title="Nach unten" ${index === legendItems.length - 1 ? 'disabled' : ''}>▼</button>
|
||||
<button onclick="removeLegendItem(${index})" title="Entfernen" class="btn-remove">✕</button>
|
||||
<button type="button" onclick="moveLegendItem(${index}, -1)" title="Nach oben" ${index === 0 ? 'disabled' : ''}>▲</button>
|
||||
<button type="button" onclick="moveLegendItem(${index}, 1)" title="Nach unten" ${index === legendItems.length - 1 ? 'disabled' : ''}>▼</button>
|
||||
<button type="button" onclick="removeLegendItem(${index})" title="Entfernen" class="btn-remove">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
updateLegendPreview();
|
||||
}
|
||||
|
||||
function updateLegendItem(index, field, value) {
|
||||
if (legendItems[index]) {
|
||||
legendItems[index][field] = value;
|
||||
saveLegendToStorage();
|
||||
updateLegendPreview();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -547,28 +552,130 @@ function loadLegendFromStorage() {
|
||||
}
|
||||
}
|
||||
|
||||
// ========== LEGENDE VORSCHAU ==========
|
||||
function generateLegendSVG() {
|
||||
if (legendItems.length === 0) return null;
|
||||
|
||||
const itemHeight = 50;
|
||||
const width = 320;
|
||||
const height = legendItems.length * itemHeight + 60;
|
||||
|
||||
let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
|
||||
<rect width="${width}" height="${height}" fill="white"/>
|
||||
<text x="20" y="30" font-family="Arial" font-size="18" font-weight="bold">Legende</text>
|
||||
<line x1="20" y1="40" x2="${width - 20}" y2="40" stroke="#ccc" stroke-width="1"/>`;
|
||||
|
||||
legendItems.forEach((item, index) => {
|
||||
const y = 60 + index * itemHeight;
|
||||
svg += `<g transform="translate(20, ${y})">
|
||||
<g transform="scale(0.5)">${item.svg.replace(/<svg[^>]*>/, '').replace('</svg>', '')}</g>
|
||||
<text x="50" y="20" font-family="Arial" font-size="14" font-weight="bold">${escapeHtml(item.name)}</text>
|
||||
${item.description ? `<text x="50" y="35" font-family="Arial" font-size="11" fill="#666">${escapeHtml(item.description)}</text>` : ''}
|
||||
</g>`;
|
||||
});
|
||||
|
||||
svg += '</svg>';
|
||||
return svg;
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function updateLegendPreview() {
|
||||
const previewBox = document.getElementById('legendPreviewBox');
|
||||
if (!previewBox) return;
|
||||
|
||||
if (legendItems.length === 0) {
|
||||
previewBox.innerHTML = '<div class="legend-preview-empty">Keine Eintraege vorhanden</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
const svg = generateLegendSVG();
|
||||
if (svg) {
|
||||
previewBox.innerHTML = svg;
|
||||
}
|
||||
}
|
||||
|
||||
async function copyLegendAsImage() {
|
||||
if (legendItems.length === 0) {
|
||||
showNotification('Legende ist leer', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const svg = generateLegendSVG();
|
||||
if (!svg) return;
|
||||
|
||||
try {
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const itemHeight = 50;
|
||||
const width = 320;
|
||||
const height = legendItems.length * itemHeight + 60;
|
||||
|
||||
canvas.width = width * 2;
|
||||
canvas.height = height * 2;
|
||||
ctx.scale(2, 2);
|
||||
ctx.fillStyle = 'white';
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
|
||||
const img = new Image();
|
||||
const svgBlob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
|
||||
const url = URL.createObjectURL(svgBlob);
|
||||
|
||||
await new Promise((resolve, reject) => {
|
||||
img.onload = resolve;
|
||||
img.onerror = reject;
|
||||
img.src = url;
|
||||
});
|
||||
|
||||
ctx.drawImage(img, 0, 0, width, height);
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
canvas.toBlob(async (blob) => {
|
||||
try {
|
||||
await navigator.clipboard.write([
|
||||
new ClipboardItem({ 'image/png': blob })
|
||||
]);
|
||||
showNotification('Legende in Zwischenablage kopiert!');
|
||||
} catch (err) {
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = 'legende.png';
|
||||
link.click();
|
||||
showNotification('Legende als PNG heruntergeladen');
|
||||
}
|
||||
}, 'image/png');
|
||||
} catch (err) {
|
||||
console.error('Fehler beim Kopieren:', err);
|
||||
showNotification('Fehler beim Kopieren', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// ========== LEGENDE EXPORTIEREN ==========
|
||||
function exportLegendSVG() {
|
||||
if (legendItems.length === 0) {
|
||||
showNotification('Legende ist leer', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const itemHeight = 50;
|
||||
const width = 400;
|
||||
const height = legendItems.length * itemHeight + 60;
|
||||
|
||||
|
||||
let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
|
||||
<rect width="${width}" height="${height}" fill="white"/>
|
||||
<text x="20" y="30" font-family="Arial" font-size="18" font-weight="bold">Legende</text>
|
||||
<line x1="20" y1="40" x2="${width - 20}" y2="40" stroke="#ccc" stroke-width="1"/>`;
|
||||
|
||||
|
||||
legendItems.forEach((item, index) => {
|
||||
const y = 60 + index * itemHeight;
|
||||
svg += `<g transform="translate(20, ${y})">
|
||||
<g transform="scale(0.5)">${item.svg.replace(/<svg[^>]*>/, '').replace('</svg>', '')}</g>
|
||||
<text x="50" y="20" font-family="Arial" font-size="14" font-weight="bold">${item.name}</text>
|
||||
${item.description ? `<text x="50" y="35" font-family="Arial" font-size="11" fill="#666">${item.description}</text>` : ''}
|
||||
<text x="50" y="20" font-family="Arial" font-size="14" font-weight="bold">${escapeHtml(item.name)}</text>
|
||||
${item.description ? `<text x="50" y="35" font-family="Arial" font-size="11" fill="#666">${escapeHtml(item.description)}</text>` : ''}
|
||||
</g>`;
|
||||
});
|
||||
|
||||
@@ -838,586 +945,14 @@ function parseSvgPath(d, scaleX, flipY) {
|
||||
}
|
||||
|
||||
|
||||
// ========== TEXT-GENERATOR v4 ==========
|
||||
// Features: Farben, Skalierung, abknickbare Pfeile (korrigiert), Pfeilspitzengroesse, PNG/JPG, Speichern
|
||||
|
||||
var textGenState = {
|
||||
text: '',
|
||||
fontSize: 16,
|
||||
textColor: '#000000',
|
||||
frameColor: '#000000',
|
||||
shape: 'none',
|
||||
frameScale: 100,
|
||||
framePadding: 10,
|
||||
lineStyle: 'solid',
|
||||
lineWeight: 2,
|
||||
arrow: 'none',
|
||||
arrowLength: 40,
|
||||
arrowAngle: 0,
|
||||
arrowBend: 50,
|
||||
arrowSize: 10
|
||||
};
|
||||
|
||||
// Custom Symbols aus localStorage
|
||||
var customSymbols = [];
|
||||
|
||||
function initTextGenerator() {
|
||||
// Load custom symbols
|
||||
loadCustomSymbols();
|
||||
|
||||
var textInput = document.getElementById('customText');
|
||||
var fontSizeInput = document.getElementById('fontSize');
|
||||
var fontSizeValue = document.getElementById('fontSizeValue');
|
||||
var textColorInput = document.getElementById('textColor');
|
||||
var textColorValue = document.getElementById('textColorValue');
|
||||
var frameColorInput = document.getElementById('frameColor');
|
||||
var frameColorValue = document.getElementById('frameColorValue');
|
||||
var frameScaleInput = document.getElementById('frameScale');
|
||||
var frameScaleValue = document.getElementById('frameScaleValue');
|
||||
var framePaddingInput = document.getElementById('framePadding');
|
||||
var framePaddingValue = document.getElementById('framePaddingValue');
|
||||
var arrowLengthInput = document.getElementById('arrowLength');
|
||||
var arrowLengthValue = document.getElementById('arrowLengthValue');
|
||||
var arrowAngleInput = document.getElementById('arrowAngle');
|
||||
var arrowAngleValue = document.getElementById('arrowAngleValue');
|
||||
var arrowBendInput = document.getElementById('arrowBend');
|
||||
var arrowBendValue = document.getElementById('arrowBendValue');
|
||||
var arrowSizeInput = document.getElementById('arrowSize');
|
||||
var arrowSizeValue = document.getElementById('arrowSizeValue');
|
||||
|
||||
// Text input
|
||||
if (textInput) {
|
||||
textInput.addEventListener('input', function(e) {
|
||||
textGenState.text = e.target.value;
|
||||
updateTextPreview();
|
||||
});
|
||||
}
|
||||
|
||||
// Font size
|
||||
if (fontSizeInput) {
|
||||
fontSizeInput.addEventListener('input', function(e) {
|
||||
textGenState.fontSize = parseInt(e.target.value);
|
||||
fontSizeValue.textContent = e.target.value + 'px';
|
||||
updateTextPreview();
|
||||
});
|
||||
}
|
||||
|
||||
// Text color
|
||||
if (textColorInput) {
|
||||
textColorInput.addEventListener('input', function(e) {
|
||||
textGenState.textColor = e.target.value;
|
||||
textColorValue.textContent = e.target.value;
|
||||
updateTextPreview();
|
||||
});
|
||||
}
|
||||
|
||||
// Frame color
|
||||
if (frameColorInput) {
|
||||
frameColorInput.addEventListener('input', function(e) {
|
||||
textGenState.frameColor = e.target.value;
|
||||
frameColorValue.textContent = e.target.value;
|
||||
updateTextPreview();
|
||||
});
|
||||
}
|
||||
|
||||
// Frame scale
|
||||
if (frameScaleInput) {
|
||||
frameScaleInput.addEventListener('input', function(e) {
|
||||
textGenState.frameScale = parseInt(e.target.value);
|
||||
frameScaleValue.textContent = e.target.value + '%';
|
||||
updateTextPreview();
|
||||
});
|
||||
}
|
||||
|
||||
// Frame padding
|
||||
if (framePaddingInput) {
|
||||
framePaddingInput.addEventListener('input', function(e) {
|
||||
textGenState.framePadding = parseInt(e.target.value);
|
||||
framePaddingValue.textContent = e.target.value + 'px';
|
||||
updateTextPreview();
|
||||
});
|
||||
}
|
||||
|
||||
// Arrow length
|
||||
if (arrowLengthInput) {
|
||||
arrowLengthInput.addEventListener('input', function(e) {
|
||||
textGenState.arrowLength = parseInt(e.target.value);
|
||||
arrowLengthValue.textContent = e.target.value + 'px';
|
||||
updateTextPreview();
|
||||
});
|
||||
}
|
||||
|
||||
// Arrow angle
|
||||
if (arrowAngleInput) {
|
||||
arrowAngleInput.addEventListener('input', function(e) {
|
||||
textGenState.arrowAngle = parseInt(e.target.value);
|
||||
arrowAngleValue.textContent = e.target.value + '\u00B0';
|
||||
updateTextPreview();
|
||||
});
|
||||
}
|
||||
|
||||
// Arrow bend position
|
||||
if (arrowBendInput) {
|
||||
arrowBendInput.addEventListener('input', function(e) {
|
||||
textGenState.arrowBend = parseInt(e.target.value);
|
||||
arrowBendValue.textContent = e.target.value + '%';
|
||||
updateTextPreview();
|
||||
});
|
||||
}
|
||||
|
||||
// Arrow size
|
||||
if (arrowSizeInput) {
|
||||
arrowSizeInput.addEventListener('input', function(e) {
|
||||
textGenState.arrowSize = parseInt(e.target.value);
|
||||
arrowSizeValue.textContent = e.target.value + 'px';
|
||||
updateTextPreview();
|
||||
});
|
||||
}
|
||||
|
||||
// Shape buttons
|
||||
document.querySelectorAll('.shape-btn').forEach(function(btn) {
|
||||
btn.addEventListener('click', function() {
|
||||
document.querySelectorAll('.shape-btn').forEach(function(b) { b.classList.remove('active'); });
|
||||
btn.classList.add('active');
|
||||
textGenState.shape = btn.dataset.shape;
|
||||
updateFrameScaleVisibility();
|
||||
updateTextPreview();
|
||||
});
|
||||
});
|
||||
|
||||
// Line style buttons
|
||||
document.querySelectorAll('.line-btn').forEach(function(btn) {
|
||||
btn.addEventListener('click', function() {
|
||||
document.querySelectorAll('.line-btn').forEach(function(b) { b.classList.remove('active'); });
|
||||
btn.classList.add('active');
|
||||
textGenState.lineStyle = btn.dataset.style;
|
||||
updateTextPreview();
|
||||
});
|
||||
});
|
||||
|
||||
// Line weight buttons
|
||||
document.querySelectorAll('.weight-btn').forEach(function(btn) {
|
||||
btn.addEventListener('click', function() {
|
||||
document.querySelectorAll('.weight-btn').forEach(function(b) { b.classList.remove('active'); });
|
||||
btn.classList.add('active');
|
||||
textGenState.lineWeight = parseInt(btn.dataset.weight);
|
||||
updateTextPreview();
|
||||
});
|
||||
});
|
||||
|
||||
// Arrow buttons
|
||||
document.querySelectorAll('.arrow-btn').forEach(function(btn) {
|
||||
btn.addEventListener('click', function() {
|
||||
document.querySelectorAll('.arrow-btn').forEach(function(b) { b.classList.remove('active'); });
|
||||
btn.classList.add('active');
|
||||
textGenState.arrow = btn.dataset.arrow;
|
||||
updateArrowDetailsVisibility();
|
||||
updateTextPreview();
|
||||
});
|
||||
});
|
||||
|
||||
updateFrameScaleVisibility();
|
||||
updateArrowDetailsVisibility();
|
||||
updateTextPreview();
|
||||
}
|
||||
|
||||
function updateFrameScaleVisibility() {
|
||||
var row = document.getElementById('frameScaleRow');
|
||||
if (row) {
|
||||
row.style.display = textGenState.shape === 'none' ? 'none' : 'flex';
|
||||
}
|
||||
}
|
||||
|
||||
function updateArrowDetailsVisibility() {
|
||||
var row = document.getElementById('arrowDetailsRow');
|
||||
if (row) {
|
||||
row.style.display = textGenState.arrow === 'none' ? 'none' : 'flex';
|
||||
}
|
||||
}
|
||||
|
||||
// ========== TEXT-GENERATOR UI ==========
|
||||
function toggleTextGenerator() {
|
||||
var generator = document.querySelector('.text-generator');
|
||||
generator.classList.toggle('collapsed');
|
||||
}
|
||||
|
||||
function getStrokeDasharray(style) {
|
||||
switch(style) {
|
||||
case 'dashed': return '8,4';
|
||||
case 'dotted': return '2,3';
|
||||
default: return 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function generateTextSVG() {
|
||||
var text = textGenState.text || 'Text';
|
||||
var fontSize = textGenState.fontSize;
|
||||
var textColor = textGenState.textColor;
|
||||
var frameColor = textGenState.frameColor;
|
||||
var shape = textGenState.shape;
|
||||
var frameScale = textGenState.frameScale / 100;
|
||||
var padding = textGenState.framePadding;
|
||||
var lineStyle = textGenState.lineStyle;
|
||||
var lineWeight = textGenState.lineWeight;
|
||||
var arrow = textGenState.arrow;
|
||||
var arrowLength = textGenState.arrowLength;
|
||||
var arrowAngle = textGenState.arrowAngle;
|
||||
var arrowBend = textGenState.arrowBend / 100;
|
||||
var arrowSize = textGenState.arrowSize;
|
||||
|
||||
// Zeilen aufteilen
|
||||
var lines = text.split('\n');
|
||||
if (lines.length === 0) lines = ['Text'];
|
||||
|
||||
// Berechne die laengste Zeile
|
||||
var maxLineLength = 0;
|
||||
for (var i = 0; i < lines.length; i++) {
|
||||
if (lines[i].length > maxLineLength) {
|
||||
maxLineLength = lines[i].length;
|
||||
}
|
||||
}
|
||||
if (maxLineLength === 0) maxLineLength = 4;
|
||||
|
||||
// Dimensionen berechnen
|
||||
var charWidth = fontSize * 0.6;
|
||||
var lineHeight = fontSize * 1.3;
|
||||
var textWidth = maxLineLength * charWidth;
|
||||
var textHeight = lines.length * lineHeight;
|
||||
|
||||
// Basis-SVG-Groesse (Text + Padding)
|
||||
var baseWidth = textWidth + (padding * 2);
|
||||
var baseHeight = textHeight + (padding * 2);
|
||||
|
||||
// Rahmen mit Skalierung
|
||||
var frameWidth = baseWidth * frameScale;
|
||||
var frameHeight = baseHeight * frameScale;
|
||||
|
||||
// Mindestgroesse
|
||||
if (frameWidth < 40) frameWidth = 40;
|
||||
if (frameHeight < 30) frameHeight = 30;
|
||||
|
||||
// Pfeil-Raum berechnen (inkl. Pfeilspitze)
|
||||
var arrowSpace = (arrow !== 'none') ? arrowLength + arrowSize + 5 : 0;
|
||||
|
||||
// SVG-Groesse mit Pfeil-Raum
|
||||
var svgWidth = frameWidth;
|
||||
var svgHeight = frameHeight;
|
||||
var offsetX = 0;
|
||||
var offsetY = 0;
|
||||
|
||||
if (arrow === 'left') {
|
||||
svgWidth += arrowSpace;
|
||||
offsetX = arrowSpace;
|
||||
} else if (arrow === 'right') {
|
||||
svgWidth += arrowSpace;
|
||||
} else if (arrow === 'top') {
|
||||
svgHeight += arrowSpace;
|
||||
offsetY = arrowSpace;
|
||||
} else if (arrow === 'bottom') {
|
||||
svgHeight += arrowSpace;
|
||||
}
|
||||
|
||||
var cx = offsetX + frameWidth / 2;
|
||||
var cy = offsetY + frameHeight / 2;
|
||||
|
||||
var dashArray = getStrokeDasharray(lineStyle);
|
||||
var dashAttr = dashArray !== 'none' ? ' stroke-dasharray="' + dashArray + '"' : '';
|
||||
|
||||
var shapeSvg = '';
|
||||
var shapeX = offsetX + lineWeight / 2;
|
||||
var shapeY = offsetY + lineWeight / 2;
|
||||
var shapeW = frameWidth - lineWeight;
|
||||
var shapeH = frameHeight - lineWeight;
|
||||
|
||||
switch(shape) {
|
||||
case 'rect':
|
||||
shapeSvg = '<rect x="' + shapeX + '" y="' + shapeY + '" width="' + shapeW + '" height="' + shapeH + '" fill="none" stroke="' + frameColor + '" stroke-width="' + lineWeight + '"' + dashAttr + '/>';
|
||||
break;
|
||||
case 'square':
|
||||
var squareSize = Math.max(shapeW, shapeH);
|
||||
var sqX = cx - squareSize / 2;
|
||||
var sqY = cy - squareSize / 2;
|
||||
shapeSvg = '<rect x="' + sqX + '" y="' + sqY + '" width="' + squareSize + '" height="' + squareSize + '" fill="none" stroke="' + frameColor + '" stroke-width="' + lineWeight + '"' + dashAttr + '/>';
|
||||
break;
|
||||
case 'circle':
|
||||
var radius = Math.max(shapeW, shapeH) / 2;
|
||||
shapeSvg = '<circle cx="' + cx + '" cy="' + cy + '" r="' + (radius - lineWeight / 2) + '" fill="none" stroke="' + frameColor + '" stroke-width="' + lineWeight + '"' + dashAttr + '/>';
|
||||
break;
|
||||
case 'oval':
|
||||
var rx = shapeW / 2;
|
||||
var ry = shapeH / 2;
|
||||
shapeSvg = '<ellipse cx="' + cx + '" cy="' + cy + '" rx="' + (rx - lineWeight / 2) + '" ry="' + (ry - lineWeight / 2) + '" fill="none" stroke="' + frameColor + '" stroke-width="' + lineWeight + '"' + dashAttr + '/>';
|
||||
break;
|
||||
case 'diamond':
|
||||
var halfW = shapeW / 2;
|
||||
var halfH = shapeH / 2;
|
||||
shapeSvg = '<polygon points="' + cx + ',' + (cy - halfH) + ' ' + (cx + halfW) + ',' + cy + ' ' + cx + ',' + (cy + halfH) + ' ' + (cx - halfW) + ',' + cy + '" fill="none" stroke="' + frameColor + '" stroke-width="' + lineWeight + '"' + dashAttr + '/>';
|
||||
break;
|
||||
}
|
||||
|
||||
// Pfeil generieren
|
||||
var arrowSvg = '';
|
||||
if (arrow !== 'none') {
|
||||
arrowSvg = generateArrowPath(arrow, cx, cy, frameWidth, frameHeight, offsetX, offsetY, arrowLength, arrowAngle, arrowBend, frameColor, lineWeight, dashAttr, arrowSize);
|
||||
}
|
||||
|
||||
// Text-Elemente erzeugen
|
||||
var textSvg = '<text x="' + cx + '" font-family="Arial, sans-serif" font-size="' + fontSize + '" fill="' + textColor + '" text-anchor="middle">';
|
||||
|
||||
var totalTextHeight = lines.length * lineHeight;
|
||||
var startY = cy - (totalTextHeight / 2) + (fontSize * 0.8);
|
||||
|
||||
for (var j = 0; j < lines.length; j++) {
|
||||
var lineY = startY + (j * lineHeight);
|
||||
var lineText = lines[j] || ' ';
|
||||
lineText = lineText.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
textSvg += '<tspan x="' + cx + '" y="' + lineY + '">' + lineText + '</tspan>';
|
||||
}
|
||||
textSvg += '</text>';
|
||||
|
||||
return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + svgWidth + ' ' + svgHeight + '" width="' + svgWidth + '" height="' + svgHeight + '">' + shapeSvg + arrowSvg + textSvg + '</svg>';
|
||||
}
|
||||
|
||||
function generateArrowPath(direction, cx, cy, frameWidth, frameHeight, offsetX, offsetY, length, angle, bendPos, color, weight, dashAttr, arrowSize) {
|
||||
var startX, startY, midX, midY, endX, endY;
|
||||
var angleRad = angle * Math.PI / 180;
|
||||
|
||||
// Startpunkt am Rahmen
|
||||
switch(direction) {
|
||||
case 'top':
|
||||
startX = cx;
|
||||
startY = offsetY;
|
||||
// Erster Teil geht gerade nach oben bis zum Knickpunkt
|
||||
midX = startX;
|
||||
midY = startY - length * bendPos;
|
||||
// Zweiter Teil knickt ab
|
||||
endX = midX + Math.sin(angleRad) * (length * (1 - bendPos));
|
||||
endY = midY - Math.cos(angleRad) * (length * (1 - bendPos));
|
||||
break;
|
||||
case 'bottom':
|
||||
startX = cx;
|
||||
startY = offsetY + frameHeight;
|
||||
midX = startX;
|
||||
midY = startY + length * bendPos;
|
||||
endX = midX + Math.sin(angleRad) * (length * (1 - bendPos));
|
||||
endY = midY + Math.cos(angleRad) * (length * (1 - bendPos));
|
||||
break;
|
||||
case 'left':
|
||||
startX = offsetX;
|
||||
startY = cy;
|
||||
midX = startX - length * bendPos;
|
||||
midY = startY;
|
||||
endX = midX - Math.cos(angleRad) * (length * (1 - bendPos));
|
||||
endY = midY + Math.sin(angleRad) * (length * (1 - bendPos));
|
||||
break;
|
||||
case 'right':
|
||||
startX = offsetX + frameWidth;
|
||||
startY = cy;
|
||||
midX = startX + length * bendPos;
|
||||
midY = startY;
|
||||
endX = midX + Math.cos(angleRad) * (length * (1 - bendPos));
|
||||
endY = midY + Math.sin(angleRad) * (length * (1 - bendPos));
|
||||
break;
|
||||
}
|
||||
|
||||
// Pfad erstellen
|
||||
var pathD;
|
||||
if (angle !== 0 && bendPos > 0 && bendPos < 1) {
|
||||
// Mit Knick
|
||||
pathD = 'M ' + startX + ' ' + startY + ' L ' + midX + ' ' + midY + ' L ' + endX + ' ' + endY;
|
||||
} else {
|
||||
// Ohne Knick - gerade Linie
|
||||
pathD = 'M ' + startX + ' ' + startY + ' L ' + endX + ' ' + endY;
|
||||
}
|
||||
|
||||
// Pfeilspitze: Richtung basiert auf dem LETZTEN Segment
|
||||
var lastSegmentStartX, lastSegmentStartY;
|
||||
if (angle !== 0 && bendPos > 0 && bendPos < 1) {
|
||||
// Letztes Segment ist von mid zu end
|
||||
lastSegmentStartX = midX;
|
||||
lastSegmentStartY = midY;
|
||||
} else {
|
||||
// Letztes Segment ist von start zu end
|
||||
lastSegmentStartX = startX;
|
||||
lastSegmentStartY = startY;
|
||||
}
|
||||
|
||||
// Winkel des letzten Segments berechnen
|
||||
var arrowHeadAngle = Math.atan2(endY - lastSegmentStartY, endX - lastSegmentStartX);
|
||||
|
||||
// Pfeilspitze Punkte
|
||||
var ah1x = endX - arrowSize * Math.cos(arrowHeadAngle - Math.PI / 6);
|
||||
var ah1y = endY - arrowSize * Math.sin(arrowHeadAngle - Math.PI / 6);
|
||||
var ah2x = endX - arrowSize * Math.cos(arrowHeadAngle + Math.PI / 6);
|
||||
var ah2y = endY - arrowSize * Math.sin(arrowHeadAngle + Math.PI / 6);
|
||||
|
||||
var arrowHead = '<polygon points="' + endX + ',' + endY + ' ' + ah1x + ',' + ah1y + ' ' + ah2x + ',' + ah2y + '" fill="' + color + '"/>';
|
||||
|
||||
return '<path d="' + pathD + '" fill="none" stroke="' + color + '" stroke-width="' + weight + '"' + dashAttr + '/>' + arrowHead;
|
||||
}
|
||||
|
||||
function updateTextPreview() {
|
||||
var preview = document.getElementById('textPreview');
|
||||
if (preview) {
|
||||
preview.innerHTML = generateTextSVG();
|
||||
}
|
||||
}
|
||||
|
||||
// Hilfsfunktion: SVG zu Canvas rendern
|
||||
async function svgToCanvas(svg, scale) {
|
||||
var parser = new DOMParser();
|
||||
var svgDoc = parser.parseFromString(svg, 'image/svg+xml');
|
||||
var svgEl = svgDoc.documentElement;
|
||||
var svgWidth = parseFloat(svgEl.getAttribute('width')) || 100;
|
||||
var svgHeight = parseFloat(svgEl.getAttribute('height')) || 100;
|
||||
|
||||
if (!scale) {
|
||||
scale = Math.max(200 / Math.min(svgWidth, svgHeight), 1);
|
||||
scale = Math.min(scale, 512 / Math.max(svgWidth, svgHeight));
|
||||
}
|
||||
|
||||
var canvasWidth = Math.round(svgWidth * scale);
|
||||
var canvasHeight = Math.round(svgHeight * scale);
|
||||
|
||||
var canvas = document.createElement('canvas');
|
||||
var ctx = canvas.getContext('2d');
|
||||
canvas.width = canvasWidth;
|
||||
canvas.height = canvasHeight;
|
||||
|
||||
var img = new Image();
|
||||
var svgBlob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
|
||||
var url = URL.createObjectURL(svgBlob);
|
||||
|
||||
await new Promise(function(resolve, reject) {
|
||||
img.onload = resolve;
|
||||
img.onerror = reject;
|
||||
img.src = url;
|
||||
});
|
||||
|
||||
ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
return canvas;
|
||||
}
|
||||
|
||||
async function copyTextAsImage() {
|
||||
var svg = generateTextSVG();
|
||||
|
||||
try {
|
||||
var canvas = await svgToCanvas(svg);
|
||||
|
||||
canvas.toBlob(async function(blob) {
|
||||
try {
|
||||
await navigator.clipboard.write([
|
||||
new ClipboardItem({ 'image/png': blob })
|
||||
]);
|
||||
showNotification('In Zwischenablage kopiert!');
|
||||
} catch (err) {
|
||||
var link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = 'text-symbol.png';
|
||||
link.click();
|
||||
showNotification('PNG heruntergeladen');
|
||||
}
|
||||
}, 'image/png');
|
||||
} catch (err) {
|
||||
console.error('Fehler:', err);
|
||||
showNotification('Fehler beim Kopieren', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function downloadTextSVG() {
|
||||
var svg = generateTextSVG();
|
||||
var blob = new Blob([svg], { type: 'image/svg+xml' });
|
||||
var url = URL.createObjectURL(blob);
|
||||
var link = document.createElement('a');
|
||||
link.href = url;
|
||||
var filename = textGenState.text ? textGenState.text.replace(/\n/g, '_').replace(/[^a-zA-Z0-9_-]/g, '').substring(0, 20) : 'symbol';
|
||||
link.download = 'text-' + filename + '.svg';
|
||||
link.click();
|
||||
URL.revokeObjectURL(url);
|
||||
showNotification('SVG heruntergeladen!');
|
||||
}
|
||||
|
||||
async function downloadTextPNG() {
|
||||
var svg = generateTextSVG();
|
||||
try {
|
||||
var canvas = await svgToCanvas(svg, 2); // 2x Skalierung fuer bessere Qualitaet
|
||||
|
||||
canvas.toBlob(function(blob) {
|
||||
var link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
var filename = textGenState.text ? textGenState.text.replace(/\n/g, '_').replace(/[^a-zA-Z0-9_-]/g, '').substring(0, 20) : 'symbol';
|
||||
link.download = 'text-' + filename + '.png';
|
||||
link.click();
|
||||
URL.revokeObjectURL(link.href);
|
||||
showNotification('PNG heruntergeladen!');
|
||||
}, 'image/png');
|
||||
} catch (err) {
|
||||
console.error('Fehler:', err);
|
||||
showNotification('Fehler beim PNG-Export', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function downloadTextJPG() {
|
||||
var svg = generateTextSVG();
|
||||
try {
|
||||
var canvas = await svgToCanvas(svg, 2);
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
// Weisser Hintergrund fuer JPG
|
||||
var tempCanvas = document.createElement('canvas');
|
||||
tempCanvas.width = canvas.width;
|
||||
tempCanvas.height = canvas.height;
|
||||
var tempCtx = tempCanvas.getContext('2d');
|
||||
tempCtx.fillStyle = '#FFFFFF';
|
||||
tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
|
||||
tempCtx.drawImage(canvas, 0, 0);
|
||||
|
||||
tempCanvas.toBlob(function(blob) {
|
||||
var link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
var filename = textGenState.text ? textGenState.text.replace(/\n/g, '_').replace(/[^a-zA-Z0-9_-]/g, '').substring(0, 20) : 'symbol';
|
||||
link.download = 'text-' + filename + '.jpg';
|
||||
link.click();
|
||||
URL.revokeObjectURL(link.href);
|
||||
showNotification('JPG heruntergeladen!');
|
||||
}, 'image/jpeg', 0.95);
|
||||
} catch (err) {
|
||||
console.error('Fehler:', err);
|
||||
showNotification('Fehler beim JPG-Export', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function downloadTextDXF() {
|
||||
var svg = generateTextSVG();
|
||||
var dxf = svgToDxf(svg, 1);
|
||||
var blob = new Blob([dxf], { type: 'application/dxf' });
|
||||
var url = URL.createObjectURL(blob);
|
||||
var link = document.createElement('a');
|
||||
link.href = url;
|
||||
var filename = textGenState.text ? textGenState.text.replace(/\n/g, '_').replace(/[^a-zA-Z0-9_-]/g, '').substring(0, 20) : 'symbol';
|
||||
link.download = 'text-' + filename + '.dxf';
|
||||
link.click();
|
||||
URL.revokeObjectURL(url);
|
||||
showNotification('DXF heruntergeladen!');
|
||||
}
|
||||
|
||||
function addTextToLegend() {
|
||||
var svg = generateTextSVG();
|
||||
var text = textGenState.text || 'Text';
|
||||
var displayName = text.replace(/\n/g, ' ').substring(0, 30);
|
||||
|
||||
legendItems.push({
|
||||
id: 'custom_text_' + Date.now(),
|
||||
name: displayName,
|
||||
svg: svg,
|
||||
description: ''
|
||||
});
|
||||
|
||||
updateLegendCount();
|
||||
saveLegendToStorage();
|
||||
showNotification('Zur Legende hinzugefuegt!');
|
||||
}
|
||||
// Custom Symbols aus localStorage
|
||||
var customSymbols = [];
|
||||
|
||||
// ========== CUSTOM SYMBOLS STORAGE ==========
|
||||
|
||||
|
||||
@@ -1,859 +0,0 @@
|
||||
// ============================================
|
||||
// SYMBOL-DEFINITIONEN
|
||||
// Gutachter Symbolbibliothek v2.0
|
||||
// ============================================
|
||||
|
||||
const SYMBOLS = {
|
||||
// ========== SCHADENSARTEN ==========
|
||||
schaeden: {
|
||||
name: "Schadensarten",
|
||||
icon: "🔥",
|
||||
items: [
|
||||
{
|
||||
id: "wasserschaden",
|
||||
name: "Wasserschaden",
|
||||
filename: "wasserschaden_symbol.svg",
|
||||
tags: ["wasser", "feuchtigkeit", "nass"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 4 C32 4 12 28 12 42 C12 53 21 60 32 60 C43 60 52 53 52 42 C52 28 32 4 32 4 Z" fill="#3b82f6" stroke="#2563eb" stroke-width="2"/><ellipse cx="24" cy="38" rx="6" ry="10" fill="#93c5fd" opacity="0.5"/><circle cx="22" cy="32" r="3" fill="#dbeafe" opacity="0.7"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "brandschaden",
|
||||
name: "Brandschaden",
|
||||
filename: "brandschaden_symbol.svg",
|
||||
tags: ["feuer", "brand", "flamme"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 2 C32 2 18 18 18 34 C18 42 22 50 28 54 C24 48 24 40 28 34 C28 42 32 48 38 50 C34 44 36 36 40 32 C40 40 44 46 48 48 C50 44 52 38 52 34 C52 18 32 2 32 2 Z" fill="#f97316" stroke="#ea580c" stroke-width="1"/><path d="M32 14 C32 14 22 26 22 38 C22 44 26 50 32 52 C28 48 28 42 32 38 C32 44 36 48 40 48 C44 44 46 40 46 36 C46 26 32 14 32 14 Z" fill="#fb923c"/><path d="M32 26 C32 26 26 34 26 42 C26 46 28 50 32 52 C30 48 30 44 32 42 C34 46 36 48 38 48 C40 46 42 44 42 42 C42 34 32 26 32 26 Z" fill="#fbbf24"/><ellipse cx="32" cy="48" rx="4" ry="6" fill="#fef08a"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "rauchschaden",
|
||||
name: "Rauchschaden",
|
||||
filename: "rauchschaden_symbol.svg",
|
||||
tags: ["rauch", "russ", "qualm"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="54" rx="14" ry="6" fill="#4b5563" opacity="0.9"/><ellipse cx="24" cy="42" rx="10" ry="8" fill="#6b7280" opacity="0.8"/><ellipse cx="40" cy="40" rx="12" ry="9" fill="#6b7280" opacity="0.75"/><ellipse cx="32" cy="28" rx="14" ry="10" fill="#9ca3af" opacity="0.7"/><ellipse cx="20" cy="24" rx="8" ry="7" fill="#9ca3af" opacity="0.6"/><ellipse cx="44" cy="26" rx="9" ry="7" fill="#9ca3af" opacity="0.6"/><ellipse cx="32" cy="14" rx="10" ry="7" fill="#d1d5db" opacity="0.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "leitungswasser",
|
||||
name: "Leitungswasser / Rohrbruch",
|
||||
filename: "leitungswasserschaden_symbol.svg",
|
||||
tags: ["rohr", "leitung", "bruch", "wasser"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="2" y="24" width="22" height="16" rx="2" fill="#71717a" stroke="#52525b" stroke-width="2"/><rect x="20" y="22" width="6" height="20" rx="1" fill="#a1a1aa" stroke="#71717a" stroke-width="1"/><rect x="40" y="24" width="22" height="16" rx="2" fill="#71717a" stroke="#52525b" stroke-width="2"/><rect x="38" y="22" width="6" height="20" rx="1" fill="#a1a1aa" stroke="#71717a" stroke-width="1"/><path d="M26 22 L28 28 L26 32 L28 36 L26 42" stroke="#dc2626" stroke-width="2" fill="none" stroke-linecap="round"/><path d="M38 22 L36 28 L38 32 L36 36 L38 42" stroke="#dc2626" stroke-width="2" fill="none" stroke-linecap="round"/><path d="M30 28 Q34 20 38 10" stroke="#3b82f6" stroke-width="3" fill="none" stroke-linecap="round"/><path d="M31 32 Q36 32 42 28" stroke="#3b82f6" stroke-width="3" fill="none" stroke-linecap="round"/><path d="M30 36 Q34 44 38 54" stroke="#3b82f6" stroke-width="3" fill="none" stroke-linecap="round"/><circle cx="40" cy="8" r="3" fill="#60a5fa"/><circle cx="36" cy="56" r="3" fill="#60a5fa"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "schimmel",
|
||||
name: "Schimmelschaden",
|
||||
filename: "schimmelschaden_symbol.svg",
|
||||
tags: ["schimmel", "pilz", "feucht", "sporen"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="34" rx="24" ry="20" fill="#1f2937" opacity="0.3"/><ellipse cx="24" cy="28" rx="10" ry="8" fill="#166534"/><ellipse cx="38" cy="32" rx="12" ry="10" fill="#15803d"/><ellipse cx="28" cy="40" rx="9" ry="7" fill="#166534"/><ellipse cx="42" cy="24" rx="7" ry="6" fill="#14532d"/><ellipse cx="18" cy="38" rx="6" ry="5" fill="#15803d"/><circle cx="20" cy="26" r="2" fill="#052e16"/><circle cx="30" cy="30" r="2.5" fill="#052e16"/><circle cx="40" cy="28" r="2" fill="#052e16"/><circle cx="35" cy="38" r="2" fill="#052e16"/><circle cx="52" cy="12" r="10" fill="#dc2626"/><text x="52" y="17" font-family="Arial" font-size="14" font-weight="bold" fill="white" text-anchor="middle">!</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "sturm",
|
||||
name: "Sturmschaden",
|
||||
filename: "sturmschaden_symbol.svg",
|
||||
tags: ["sturm", "wind", "dach", "unwetter"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="14" y="32" width="28" height="24" fill="#78716c" stroke="#57534e" stroke-width="2"/><polygon points="10,32 28,14 50,32" fill="#991b1b" stroke="#7f1d1d" stroke-width="2"/><polygon points="38,18 46,26 50,22 42,14" fill="#78716c" stroke="#57534e" stroke-width="1"/><rect x="18" y="38" width="8" height="8" fill="#bfdbfe" stroke="#57534e" stroke-width="1"/><rect x="30" y="38" width="8" height="8" fill="#bfdbfe" stroke="#57534e" stroke-width="1"/><rect x="24" y="46" width="8" height="10" fill="#44403c"/><path d="M48 10 Q56 10 54 6" stroke="#6b7280" stroke-width="3" fill="none" stroke-linecap="round"/><path d="M50 18 Q60 18 58 14" stroke="#6b7280" stroke-width="3" fill="none" stroke-linecap="round"/><path d="M52 26 Q62 26 60 22" stroke="#6b7280" stroke-width="2" fill="none" stroke-linecap="round"/><rect x="54" y="8" width="6" height="3" fill="#991b1b" transform="rotate(25 57 9)"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "einbruch",
|
||||
name: "Einbruchschaden",
|
||||
filename: "einbruchschaden_symbol.svg",
|
||||
tags: ["einbruch", "diebstahl", "fenster", "tür"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="8" width="48" height="48" fill="none" stroke="#57534e" stroke-width="4" rx="2"/><line x1="32" y1="8" x2="32" y2="56" stroke="#57534e" stroke-width="3"/><line x1="8" y1="32" x2="56" y2="32" stroke="#57534e" stroke-width="3"/><polygon points="12,12 20,20 12,28 18,20" fill="#bfdbfe" stroke="#93c5fd" stroke-width="1"/><polygon points="20,14 28,12 24,24 16,20" fill="#dbeafe" stroke="#93c5fd" stroke-width="1"/><polygon points="10,36 18,42 12,52 8,44" fill="#bfdbfe" stroke="#93c5fd" stroke-width="1"/><rect x="36" y="16" width="4" height="32" rx="1" fill="#1f2937" transform="rotate(20 38 32)"/><rect x="34" y="14" width="8" height="6" rx="1" fill="#1f2937" transform="rotate(20 38 17)"/><circle cx="52" cy="52" r="8" fill="#dc2626"/><line x1="48" y1="48" x2="56" y2="56" stroke="white" stroke-width="2" stroke-linecap="round"/><line x1="56" y1="48" x2="48" y2="56" stroke="white" stroke-width="2" stroke-linecap="round"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "elektro",
|
||||
name: "Elektroschaden",
|
||||
filename: "elektroschaden_symbol.svg",
|
||||
tags: ["elektro", "strom", "blitz", "kurzschluss"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="36,2 20,28 30,28 24,46 44,18 34,18" fill="#fbbf24" stroke="#f59e0b" stroke-width="2" stroke-linejoin="round"/><rect x="12" y="38" width="24" height="22" rx="3" fill="#e5e7eb" stroke="#9ca3af" stroke-width="2"/><circle cx="20" cy="46" r="3" fill="#1f2937"/><circle cx="28" cy="46" r="3" fill="#1f2937"/><rect x="22" y="52" width="4" height="4" rx="1" fill="#1f2937"/><line x1="40" y1="42" x2="48" y2="38" stroke="#f59e0b" stroke-width="2" stroke-linecap="round"/><line x1="42" y1="48" x2="52" y2="46" stroke="#f59e0b" stroke-width="2" stroke-linecap="round"/><line x1="40" y1="54" x2="50" y2="56" stroke="#f59e0b" stroke-width="2" stroke-linecap="round"/><polygon points="50,36 46,42 48,42 46,48 52,40 50,40" fill="#fbbf24"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "hagel",
|
||||
name: "Hagelschaden",
|
||||
filename: "hagelschaden_symbol.svg",
|
||||
tags: ["hagel", "eis", "dellen", "unwetter"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="20" rx="24" ry="14" fill="#6b7280"/><ellipse cx="32" cy="18" rx="22" ry="12" fill="#9ca3af"/><circle cx="14" cy="36" r="6" fill="#e0f2fe" stroke="#7dd3fc" stroke-width="2"/><circle cx="32" cy="40" r="7" fill="#e0f2fe" stroke="#7dd3fc" stroke-width="2"/><circle cx="50" cy="34" r="5" fill="#e0f2fe" stroke="#7dd3fc" stroke-width="2"/><circle cx="22" cy="52" r="6" fill="#e0f2fe" stroke="#7dd3fc" stroke-width="2"/><circle cx="44" cy="50" r="5" fill="#e0f2fe" stroke="#7dd3fc" stroke-width="2"/><line x1="14" y1="26" x2="14" y2="30" stroke="#7dd3fc" stroke-width="2"/><line x1="32" y1="24" x2="32" y2="32" stroke="#7dd3fc" stroke-width="2"/><line x1="50" y1="26" x2="50" y2="28" stroke="#7dd3fc" stroke-width="2"/><line x1="22" y1="28" x2="22" y2="46" stroke="#7dd3fc" stroke-width="1.5"/><line x1="44" y1="28" x2="44" y2="44" stroke="#7dd3fc" stroke-width="1.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vandalismus",
|
||||
name: "Vandalismus",
|
||||
filename: "vandalismus_symbol.svg",
|
||||
tags: ["vandalismus", "graffiti", "zerstörung", "sachbeschädigung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="20" width="56" height="40" fill="#d6d3d1" stroke="#78716c" stroke-width="2"/><path d="M10 30 Q20 25 30 35 Q40 45 50 30" stroke="#dc2626" stroke-width="4" fill="none" stroke-linecap="round"/><path d="M15 45 Q25 55 35 40 Q45 25 55 45" stroke="#2563eb" stroke-width="3" fill="none" stroke-linecap="round"/><text x="32" y="54" font-family="Arial" font-size="10" fill="#000" text-anchor="middle" font-style="italic">TAG</text><circle cx="52" cy="12" r="10" fill="#dc2626"/><line x1="48" y1="8" x2="56" y2="16" stroke="white" stroke-width="2.5" stroke-linecap="round"/><line x1="56" y1="8" x2="48" y2="16" stroke="white" stroke-width="2.5" stroke-linecap="round"/></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// ========== WERKZEUGE & MARKIERUNGEN ==========
|
||||
werkzeuge: {
|
||||
name: "Werkzeuge & Markierungen",
|
||||
icon: "🔧",
|
||||
items: [
|
||||
{
|
||||
id: "massstab",
|
||||
name: "Maßstab 1m",
|
||||
filename: "massstab_1m.svg",
|
||||
tags: ["maßstab", "meter", "lineal", "messen"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="24" width="56" height="16" fill="#fef3c7" stroke="#f59e0b" stroke-width="2"/><g stroke="#92400e" stroke-width="1"><line x1="4" y1="28" x2="4" y2="36"/><line x1="10" y1="30" x2="10" y2="34"/><line x1="16" y1="30" x2="16" y2="34"/><line x1="22" y1="30" x2="22" y2="34"/><line x1="28" y1="30" x2="28" y2="34"/><line x1="32" y1="28" x2="32" y2="36"/><line x1="38" y1="30" x2="38" y2="34"/><line x1="44" y1="30" x2="44" y2="34"/><line x1="50" y1="30" x2="50" y2="34"/><line x1="56" y1="30" x2="56" y2="34"/><line x1="60" y1="28" x2="60" y2="36"/></g><text x="8" y="22" font-family="Arial" font-size="8" fill="#92400e">0</text><text x="28" y="22" font-family="Arial" font-size="8" fill="#92400e">50</text><text x="54" y="22" font-family="Arial" font-size="8" fill="#92400e">100</text><text x="32" y="48" font-family="Arial" font-size="10" fill="#92400e" text-anchor="middle">1 Meter</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "messpunkt",
|
||||
name: "Messpunkt",
|
||||
filename: "messpunkt.svg",
|
||||
tags: ["messpunkt", "markierung", "punkt", "messen"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#dc2626" stroke-width="3"/><circle cx="32" cy="32" r="16" fill="none" stroke="#dc2626" stroke-width="2"/><circle cx="32" cy="32" r="6" fill="#dc2626"/><line x1="32" y1="2" x2="32" y2="14" stroke="#dc2626" stroke-width="2"/><line x1="32" y1="50" x2="32" y2="62" stroke="#dc2626" stroke-width="2"/><line x1="2" y1="32" x2="14" y2="32" stroke="#dc2626" stroke-width="2"/><line x1="50" y1="32" x2="62" y2="32" stroke="#dc2626" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "kamera",
|
||||
name: "Fotostandpunkt",
|
||||
filename: "fotostandpunkt.svg",
|
||||
tags: ["foto", "kamera", "standpunkt", "aufnahme"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="20" width="48" height="32" rx="4" fill="#374151" stroke="#1f2937" stroke-width="2"/><circle cx="32" cy="36" r="12" fill="#1f2937" stroke="#6b7280" stroke-width="2"/><circle cx="32" cy="36" r="8" fill="#3b82f6"/><circle cx="32" cy="36" r="4" fill="#1e3a5f"/><rect x="20" y="14" width="24" height="8" rx="2" fill="#4b5563"/><circle cx="48" cy="26" r="3" fill="#fbbf24"/><rect x="10" y="26" width="6" height="4" rx="1" fill="#6b7280"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "lupe",
|
||||
name: "Detailbereich",
|
||||
filename: "detailbereich.svg",
|
||||
tags: ["detail", "lupe", "vergrößerung", "zoom"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="26" cy="26" r="20" fill="#dbeafe" stroke="#3b82f6" stroke-width="3"/><circle cx="26" cy="26" r="14" fill="white" stroke="#93c5fd" stroke-width="2"/><line x1="40" y1="40" x2="58" y2="58" stroke="#3b82f6" stroke-width="6" stroke-linecap="round"/><line x1="40" y1="40" x2="56" y2="56" stroke="#60a5fa" stroke-width="3" stroke-linecap="round"/><text x="26" y="30" font-family="Arial" font-size="14" fill="#3b82f6" text-anchor="middle" font-weight="bold">+</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "notiz",
|
||||
name: "Notiz / Hinweis",
|
||||
filename: "notiz_hinweis.svg",
|
||||
tags: ["notiz", "hinweis", "anmerkung", "text"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M8 4 L56 4 L56 48 L40 48 L40 60 L8 60 Z" fill="#fef3c7" stroke="#f59e0b" stroke-width="2"/><path d="M40 48 L56 48 L40 60 Z" fill="#fcd34d" stroke="#f59e0b" stroke-width="2"/><line x1="14" y1="16" x2="50" y2="16" stroke="#d97706" stroke-width="2"/><line x1="14" y1="26" x2="50" y2="26" stroke="#d97706" stroke-width="2"/><line x1="14" y1="36" x2="50" y2="36" stroke="#d97706" stroke-width="2"/><line x1="14" y1="46" x2="34" y2="46" stroke="#d97706" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "warnung",
|
||||
name: "Warnung / Achtung",
|
||||
filename: "warnung_achtung.svg",
|
||||
tags: ["warnung", "achtung", "gefahr", "vorsicht"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="32,4 60,56 4,56" fill="#fbbf24" stroke="#f59e0b" stroke-width="2" stroke-linejoin="round"/><polygon points="32,10 54,52 10,52" fill="#fef3c7"/><text x="32" y="46" font-family="Arial" font-size="32" fill="#92400e" text-anchor="middle" font-weight="bold">!</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "info",
|
||||
name: "Information",
|
||||
filename: "information.svg",
|
||||
tags: ["info", "information", "hinweis", "details"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="#3b82f6" stroke="#2563eb" stroke-width="2"/><circle cx="32" cy="16" r="4" fill="white"/><rect x="28" y="26" width="8" height="24" rx="2" fill="white"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "haken",
|
||||
name: "Erledigt / OK",
|
||||
filename: "erledigt_ok.svg",
|
||||
tags: ["ok", "erledigt", "fertig", "haken", "check"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="#22c55e" stroke="#16a34a" stroke-width="2"/><polyline points="18,32 28,42 46,22" fill="none" stroke="white" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "kreuz",
|
||||
name: "Fehler / Mangel",
|
||||
filename: "fehler_mangel.svg",
|
||||
tags: ["fehler", "mangel", "falsch", "kreuz"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="#dc2626" stroke="#b91c1c" stroke-width="2"/><line x1="20" y1="20" x2="44" y2="44" stroke="white" stroke-width="6" stroke-linecap="round"/><line x1="44" y1="20" x2="20" y2="44" stroke="white" stroke-width="6" stroke-linecap="round"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "fragezeichen",
|
||||
name: "Unklar / Prüfen",
|
||||
filename: "unklar_pruefen.svg",
|
||||
tags: ["unklar", "prüfen", "frage", "unbekannt"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="#f59e0b" stroke="#d97706" stroke-width="2"/><text x="32" y="44" font-family="Arial" font-size="36" fill="white" text-anchor="middle" font-weight="bold">?</text></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// ========== BAUTEILE ==========
|
||||
bauteile: {
|
||||
name: "Bauteile",
|
||||
icon: "🏗️",
|
||||
items: [
|
||||
{
|
||||
id: "fenster",
|
||||
name: "Fenster",
|
||||
filename: "bauteil_fenster.svg",
|
||||
tags: ["fenster", "verglasung", "rahmen"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="4" width="48" height="56" fill="#bfdbfe" stroke="#3b82f6" stroke-width="3"/><line x1="32" y1="4" x2="32" y2="60" stroke="#3b82f6" stroke-width="3"/><line x1="8" y1="32" x2="56" y2="32" stroke="#3b82f6" stroke-width="3"/><rect x="12" y="8" width="16" height="20" fill="#dbeafe"/><rect x="36" y="8" width="16" height="20" fill="#dbeafe"/><rect x="12" y="36" width="16" height="20" fill="#dbeafe"/><rect x="36" y="36" width="16" height="20" fill="#dbeafe"/><circle cx="28" cy="32" r="2" fill="#1e40af"/><circle cx="36" cy="32" r="2" fill="#1e40af"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "tuer",
|
||||
name: "Tür",
|
||||
filename: "bauteil_tuer.svg",
|
||||
tags: ["tür", "türblatt", "eingang"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="12" y="4" width="40" height="56" fill="#92400e" stroke="#78350f" stroke-width="3"/><rect x="16" y="8" width="14" height="20" fill="#a16207" rx="1"/><rect x="34" y="8" width="14" height="20" fill="#a16207" rx="1"/><rect x="16" y="32" width="14" height="20" fill="#a16207" rx="1"/><rect x="34" y="32" width="14" height="20" fill="#a16207" rx="1"/><circle cx="44" cy="34" r="3" fill="#fbbf24" stroke="#92400e" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "wand",
|
||||
name: "Wand (Mauerwerk)",
|
||||
filename: "bauteil_wand.svg",
|
||||
tags: ["wand", "mauer", "mauerwerk", "ziegel"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="#fca5a5" stroke="#dc2626" stroke-width="2"/><g stroke="#b91c1c" stroke-width="1"><line x1="4" y1="12" x2="60" y2="12"/><line x1="4" y1="20" x2="60" y2="20"/><line x1="4" y1="28" x2="60" y2="28"/><line x1="4" y1="36" x2="60" y2="36"/><line x1="4" y1="44" x2="60" y2="44"/><line x1="4" y1="52" x2="60" y2="52"/><line x1="18" y1="4" x2="18" y2="12"/><line x1="40" y1="4" x2="40" y2="12"/><line x1="8" y1="12" x2="8" y2="20"/><line x1="30" y1="12" x2="30" y2="20"/><line x1="52" y1="12" x2="52" y2="20"/><line x1="18" y1="20" x2="18" y2="28"/><line x1="40" y1="20" x2="40" y2="28"/><line x1="8" y1="28" x2="8" y2="36"/><line x1="30" y1="28" x2="30" y2="36"/><line x1="52" y1="28" x2="52" y2="36"/><line x1="18" y1="36" x2="18" y2="44"/><line x1="40" y1="36" x2="40" y2="44"/><line x1="8" y1="44" x2="8" y2="52"/><line x1="30" y1="44" x2="30" y2="52"/><line x1="52" y1="44" x2="52" y2="52"/><line x1="18" y1="52" x2="18" y2="60"/><line x1="40" y1="52" x2="40" y2="60"/></g></svg>`
|
||||
},
|
||||
{
|
||||
id: "wand_beton",
|
||||
name: "Wand (Beton)",
|
||||
filename: "bauteil_wand_beton.svg",
|
||||
tags: ["wand", "beton", "stahlbeton", "massiv"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="#9ca3af" stroke="#6b7280" stroke-width="2"/><circle cx="12" cy="14" r="2" fill="#6b7280" opacity="0.5"/><circle cx="28" cy="8" r="1.5" fill="#6b7280" opacity="0.4"/><circle cx="48" cy="18" r="2.5" fill="#6b7280" opacity="0.5"/><circle cx="8" cy="36" r="1.5" fill="#6b7280" opacity="0.4"/><circle cx="38" cy="28" r="2" fill="#6b7280" opacity="0.5"/><circle cx="54" cy="42" r="1.5" fill="#6b7280" opacity="0.4"/><circle cx="18" cy="48" r="2" fill="#6b7280" opacity="0.5"/><circle cx="44" cy="52" r="1.5" fill="#6b7280" opacity="0.4"/><circle cx="32" cy="44" r="2.5" fill="#6b7280" opacity="0.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "boden_fliesen",
|
||||
name: "Fliesen",
|
||||
filename: "bauteil_fliesen.svg",
|
||||
tags: ["fliesen", "boden", "wand", "keramik", "kacheln"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="#e7e5e4" stroke="#78716c" stroke-width="2"/><g stroke="#a8a29e" stroke-width="2"><line x1="4" y1="18" x2="60" y2="18"/><line x1="4" y1="32" x2="60" y2="32"/><line x1="4" y1="46" x2="60" y2="46"/><line x1="18" y1="4" x2="18" y2="60"/><line x1="32" y1="4" x2="32" y2="60"/><line x1="46" y1="4" x2="46" y2="60"/></g><rect x="6" y="6" width="10" height="10" fill="#f5f5f4"/><rect x="34" y="20" width="10" height="10" fill="#f5f5f4"/><rect x="20" y="34" width="10" height="10" fill="#f5f5f4"/><rect x="48" y="48" width="10" height="10" fill="#f5f5f4"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "boden_parkett",
|
||||
name: "Parkett / Holzboden",
|
||||
filename: "bauteil_parkett.svg",
|
||||
tags: ["parkett", "holz", "boden", "laminat", "dielen"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="#d4a574" stroke="#92400e" stroke-width="2"/><g stroke="#b8860b" stroke-width="1"><rect x="4" y="4" width="14" height="28" fill="#deb887"/><rect x="18" y="4" width="14" height="28" fill="#d4a574"/><rect x="32" y="4" width="14" height="28" fill="#c9a066"/><rect x="46" y="4" width="14" height="28" fill="#deb887"/><rect x="4" y="32" width="14" height="28" fill="#c9a066"/><rect x="18" y="32" width="14" height="28" fill="#deb887"/><rect x="32" y="32" width="14" height="28" fill="#d4a574"/><rect x="46" y="32" width="14" height="28" fill="#c9a066"/></g></svg>`
|
||||
},
|
||||
{
|
||||
id: "dach",
|
||||
name: "Dach",
|
||||
filename: "bauteil_dach.svg",
|
||||
tags: ["dach", "dachstuhl", "ziegel", "bedachung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="32,4 4,40 60,40" fill="#991b1b" stroke="#7f1d1d" stroke-width="2"/><polygon points="32,10 10,38 54,38" fill="#b91c1c"/><g stroke="#7f1d1d" stroke-width="1"><line x1="12" y1="36" x2="52" y2="36"/><line x1="16" y1="32" x2="48" y2="32"/><line x1="20" y1="28" x2="44" y2="28"/><line x1="24" y1="24" x2="40" y2="24"/><line x1="28" y1="20" x2="36" y2="20"/></g><rect x="4" y="40" width="56" height="8" fill="#78716c" stroke="#57534e" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "treppe",
|
||||
name: "Treppe",
|
||||
filename: "bauteil_treppe.svg",
|
||||
tags: ["treppe", "stufen", "aufgang", "treppenhaus"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="#d6d3d1" stroke="#78716c" stroke-width="2"><rect x="4" y="52" width="56" height="8"/><rect x="4" y="44" width="48" height="8"/><rect x="4" y="36" width="40" height="8"/><rect x="4" y="28" width="32" height="8"/><rect x="4" y="20" width="24" height="8"/><rect x="4" y="12" width="16" height="8"/><rect x="4" y="4" width="8" height="8"/></g><path d="M8 8 L8 56 L58 56" stroke="#57534e" stroke-width="3" fill="none"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "daemmung",
|
||||
name: "Dämmung / Isolierung",
|
||||
filename: "bauteil_daemmung.svg",
|
||||
tags: ["dämmung", "isolierung", "wärme", "kälte"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="#fef08a" stroke="#eab308" stroke-width="2"/><g stroke="#ca8a04" stroke-width="1"><path d="M4 14 Q16 10 28 14 Q40 18 52 14 L60 14"/><path d="M4 24 Q14 28 26 24 Q38 20 50 24 L60 24"/><path d="M4 34 Q16 30 28 34 Q40 38 52 34 L60 34"/><path d="M4 44 Q14 48 26 44 Q38 40 50 44 L60 44"/><path d="M4 54 Q16 50 28 54 Q40 58 52 54 L60 54"/></g><circle cx="12" cy="20" r="2" fill="#facc15"/><circle cx="32" cy="30" r="2" fill="#facc15"/><circle cx="50" cy="40" r="2" fill="#facc15"/><circle cx="20" cy="50" r="2" fill="#facc15"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "rohr",
|
||||
name: "Rohrleitung",
|
||||
filename: "bauteil_rohr.svg",
|
||||
tags: ["rohr", "leitung", "rohrleitung", "installation"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="26" width="56" height="12" fill="#6b7280" stroke="#4b5563" stroke-width="2"/><ellipse cx="4" cy="32" rx="3" ry="8" fill="#9ca3af" stroke="#4b5563" stroke-width="1"/><ellipse cx="60" cy="32" rx="3" ry="8" fill="#9ca3af" stroke="#4b5563" stroke-width="1"/><line x1="14" y1="26" x2="14" y2="38" stroke="#4b5563" stroke-width="1"/><line x1="32" y1="26" x2="32" y2="38" stroke="#4b5563" stroke-width="1"/><line x1="50" y1="26" x2="50" y2="38" stroke="#4b5563" stroke-width="1"/><rect x="20" y="22" width="8" height="20" rx="1" fill="#ef4444" stroke="#dc2626" stroke-width="1"/><polygon points="24,18 20,22 28,22" fill="#ef4444"/></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// ========== MÖBEL ==========
|
||||
moebel: {
|
||||
name: "Möbel",
|
||||
icon: "🛋️",
|
||||
items: [
|
||||
{
|
||||
id: "sofa",
|
||||
name: "Sofa / Couch",
|
||||
filename: "moebel_sofa.svg",
|
||||
tags: ["sofa", "couch", "sitzmoebel", "wohnzimmer"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="24" width="56" height="28" rx="4" fill="#78716c" stroke="#57534e" stroke-width="2"/><rect x="8" y="20" width="48" height="20" rx="3" fill="#a8a29e" stroke="#78716c" stroke-width="1"/><rect x="4" y="28" width="10" height="20" rx="2" fill="#78716c" stroke="#57534e" stroke-width="1"/><rect x="50" y="28" width="10" height="20" rx="2" fill="#78716c" stroke="#57534e" stroke-width="1"/><rect x="6" y="52" width="6" height="6" rx="1" fill="#57534e"/><rect x="52" y="52" width="6" height="6" rx="1" fill="#57534e"/><line x1="22" y1="24" x2="22" y2="40" stroke="#57534e" stroke-width="1" opacity="0.5"/><line x1="42" y1="24" x2="42" y2="40" stroke="#57534e" stroke-width="1" opacity="0.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "tisch",
|
||||
name: "Tisch",
|
||||
filename: "moebel_tisch.svg",
|
||||
tags: ["tisch", "esstisch", "schreibtisch", "möbel"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="6" y="20" width="52" height="6" rx="1" fill="#92400e" stroke="#78350f" stroke-width="2"/><rect x="10" y="26" width="4" height="30" fill="#a16207"/><rect x="50" y="26" width="4" height="30" fill="#a16207"/><rect x="8" y="54" width="8" height="4" rx="1" fill="#78350f"/><rect x="48" y="54" width="8" height="4" rx="1" fill="#78350f"/><line x1="14" y1="40" x2="50" y2="40" stroke="#a16207" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "stuhl",
|
||||
name: "Stuhl",
|
||||
filename: "moebel_stuhl.svg",
|
||||
tags: ["stuhl", "sitz", "möbel", "esszimmer"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="14" y="4" width="36" height="32" rx="2" fill="#a16207" stroke="#92400e" stroke-width="2"/><rect x="18" y="8" width="28" height="24" rx="1" fill="#ca8a04"/><rect x="14" y="36" width="36" height="6" rx="1" fill="#92400e" stroke="#78350f" stroke-width="1"/><rect x="16" y="42" width="4" height="18" fill="#78350f"/><rect x="44" y="42" width="4" height="18" fill="#78350f"/><rect x="14" y="58" width="8" height="3" rx="1" fill="#57534e"/><rect x="42" y="58" width="8" height="3" rx="1" fill="#57534e"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "schrank",
|
||||
name: "Schrank",
|
||||
filename: "moebel_schrank.svg",
|
||||
tags: ["schrank", "kleiderschrank", "möbel", "stauraum"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="6" y="4" width="52" height="54" rx="2" fill="#a16207" stroke="#92400e" stroke-width="2"/><line x1="32" y1="4" x2="32" y2="58" stroke="#92400e" stroke-width="2"/><rect x="10" y="8" width="18" height="46" fill="#ca8a04" rx="1"/><rect x="36" y="8" width="18" height="46" fill="#ca8a04" rx="1"/><circle cx="26" cy="32" r="2" fill="#78350f"/><circle cx="38" cy="32" r="2" fill="#78350f"/><rect x="8" y="58" width="6" height="4" fill="#78350f"/><rect x="50" y="58" width="6" height="4" fill="#78350f"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "bett",
|
||||
name: "Bett",
|
||||
filename: "moebel_bett.svg",
|
||||
tags: ["bett", "schlafzimmer", "möbel", "schlafen"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="20" width="56" height="32" rx="2" fill="#78716c" stroke="#57534e" stroke-width="2"/><rect x="8" y="16" width="14" height="12" rx="2" fill="#a8a29e" stroke="#78716c" stroke-width="1"/><rect x="42" y="16" width="14" height="12" rx="2" fill="#a8a29e" stroke="#78716c" stroke-width="1"/><rect x="8" y="24" width="48" height="24" fill="#e7e5e4" stroke="#d6d3d1" stroke-width="1"/><rect x="4" y="52" width="8" height="8" rx="1" fill="#57534e"/><rect x="52" y="52" width="8" height="8" rx="1" fill="#57534e"/><path d="M12 28 Q32 20 52 28" stroke="#d6d3d1" stroke-width="1" fill="none"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "regal",
|
||||
name: "Regal",
|
||||
filename: "moebel_regal.svg",
|
||||
tags: ["regal", "bücherregal", "möbel", "stauraum"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="4" width="48" height="56" fill="none" stroke="#92400e" stroke-width="3"/><line x1="8" y1="18" x2="56" y2="18" stroke="#92400e" stroke-width="2"/><line x1="8" y1="32" x2="56" y2="32" stroke="#92400e" stroke-width="2"/><line x1="8" y1="46" x2="56" y2="46" stroke="#92400e" stroke-width="2"/><rect x="12" y="8" width="6" height="8" fill="#3b82f6" rx="1"/><rect x="20" y="6" width="5" height="10" fill="#22c55e" rx="1"/><rect x="28" y="8" width="8" height="8" fill="#f59e0b" rx="1"/><rect x="14" y="22" width="10" height="8" fill="#a8a29e" rx="1"/><rect x="30" y="20" width="6" height="10" fill="#ef4444" rx="1"/><rect x="44" y="22" width="8" height="8" fill="#8b5cf6" rx="1"/><rect x="12" y="36" width="12" height="8" fill="#06b6d4" rx="1"/><rect x="40" y="34" width="10" height="10" fill="#ec4899" rx="1"/></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// ========== KÜCHE ==========
|
||||
kueche: {
|
||||
|
||||
// ========== BAD / SANITÄR ==========
|
||||
bad: {
|
||||
name: "Bad & Sanitär",
|
||||
icon: "🚿",
|
||||
items: [
|
||||
{
|
||||
id: "wc",
|
||||
name: "WC / Toilette",
|
||||
filename: "wc_draufsicht.svg",
|
||||
tags: ["wc", "toilette", "klo", "bad", "sanitär"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="38" rx="14" ry="18" fill="#f5f5f5" stroke="#333" stroke-width="2"/><ellipse cx="32" cy="38" rx="8" ry="12" fill="#e0f2fe" stroke="#333" stroke-width="1.5"/><rect x="22" y="8" width="20" height="16" rx="3" fill="#f5f5f5" stroke="#333" stroke-width="2"/><rect x="26" y="10" width="12" height="6" rx="1" fill="#ddd" stroke="#333" stroke-width="1"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="38" rx="14" ry="18" fill="none" stroke="#000" stroke-width="1"/><ellipse cx="32" cy="38" rx="8" ry="12" fill="none" stroke="#000" stroke-width="1"/><rect x="22" y="8" width="20" height="16" rx="0" fill="none" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "waschbecken",
|
||||
name: "Waschbecken",
|
||||
filename: "waschbecken_draufsicht.svg",
|
||||
tags: ["waschbecken", "waschtisch", "bad", "sanitär", "lavabo"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="16" width="48" height="40" rx="4" fill="#f5f5f5" stroke="#333" stroke-width="2"/><ellipse cx="32" cy="36" rx="16" ry="12" fill="#e0f2fe" stroke="#333" stroke-width="1.5"/><circle cx="32" cy="40" r="3" fill="#333"/><rect x="30" y="18" width="4" height="8" rx="1" fill="#999" stroke="#333" stroke-width="1"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="16" width="48" height="40" fill="none" stroke="#000" stroke-width="1"/><ellipse cx="32" cy="36" rx="16" ry="12" fill="none" stroke="#000" stroke-width="1"/><circle cx="32" cy="40" r="3" fill="none" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "badewanne",
|
||||
name: "Badewanne",
|
||||
filename: "badewanne_draufsicht.svg",
|
||||
tags: ["badewanne", "wanne", "bad", "sanitär", "baden"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="8" width="56" height="48" rx="8" fill="#f5f5f5" stroke="#333" stroke-width="2"/><rect x="8" y="12" width="48" height="40" rx="6" fill="#e0f2fe" stroke="#333" stroke-width="1.5"/><circle cx="50" cy="18" r="3" fill="#999" stroke="#333" stroke-width="1"/><ellipse cx="50" cy="46" rx="4" ry="3" fill="#999" stroke="#333" stroke-width="1"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="8" width="56" height="48" rx="0" fill="none" stroke="#000" stroke-width="1"/><rect x="8" y="12" width="48" height="40" rx="0" fill="none" stroke="#000" stroke-width="1"/><circle cx="50" cy="18" r="3" fill="none" stroke="#000" stroke-width="1"/><ellipse cx="50" cy="46" rx="4" ry="3" fill="none" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "dusche",
|
||||
name: "Dusche",
|
||||
filename: "dusche_draufsicht.svg",
|
||||
tags: ["dusche", "duschwanne", "bad", "sanitär", "brause"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" rx="2" fill="#f5f5f5" stroke="#333" stroke-width="2"/><rect x="8" y="8" width="48" height="48" rx="1" fill="#e0f2fe" stroke="#333" stroke-width="1"/><circle cx="52" cy="12" r="4" fill="#999" stroke="#333" stroke-width="1"/><line x1="8" y1="8" x2="56" y2="56" stroke="#333" stroke-width="1" stroke-dasharray="4,2"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="none" stroke="#000" stroke-width="1"/><circle cx="52" cy="12" r="4" fill="none" stroke="#000" stroke-width="1"/><line x1="4" y1="4" x2="60" y2="60" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "bidet",
|
||||
name: "Bidet",
|
||||
filename: "bidet_draufsicht.svg",
|
||||
tags: ["bidet", "bad", "sanitär"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="32" rx="14" ry="20" fill="#f5f5f5" stroke="#333" stroke-width="2"/><ellipse cx="32" cy="32" rx="8" ry="14" fill="#e0f2fe" stroke="#333" stroke-width="1.5"/><circle cx="32" cy="18" r="2" fill="#999" stroke="#333" stroke-width="1"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="32" rx="14" ry="20" fill="none" stroke="#000" stroke-width="1"/><ellipse cx="32" cy="32" rx="8" ry="14" fill="none" stroke="#000" stroke-width="1"/><circle cx="32" cy="18" r="2" fill="none" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "doppelwaschbecken",
|
||||
name: "Doppelwaschbecken",
|
||||
filename: "doppelwaschbecken_draufsicht.svg",
|
||||
tags: ["doppelwaschbecken", "waschtisch", "bad", "sanitär", "doppel"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="2" y="16" width="60" height="32" rx="2" fill="#f5f5f5" stroke="#333" stroke-width="2"/><ellipse cx="18" cy="32" rx="10" ry="8" fill="#e0f2fe" stroke="#333" stroke-width="1"/><ellipse cx="46" cy="32" rx="10" ry="8" fill="#e0f2fe" stroke="#333" stroke-width="1"/><circle cx="18" cy="34" r="2" fill="#333"/><circle cx="46" cy="34" r="2" fill="#333"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="2" y="16" width="60" height="32" fill="none" stroke="#000" stroke-width="1"/><ellipse cx="18" cy="32" rx="10" ry="8" fill="none" stroke="#000" stroke-width="1"/><ellipse cx="46" cy="32" rx="10" ry="8" fill="none" stroke="#000" stroke-width="1"/><circle cx="18" cy="34" r="2" fill="none" stroke="#000" stroke-width="1"/><circle cx="46" cy="34" r="2" fill="none" stroke="#000" stroke-width="1"/></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
name: "Küche",
|
||||
icon: "🍳",
|
||||
items: [
|
||||
{
|
||||
id: "herd",
|
||||
name: "Herd / Kochfeld",
|
||||
filename: "kueche_herd.svg",
|
||||
tags: ["herd", "kochfeld", "küche", "kochen"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" rx="3" fill="#1f2937" stroke="#111827" stroke-width="2"/><rect x="8" y="8" width="48" height="48" fill="#374151" rx="2"/><circle cx="22" cy="22" r="8" fill="#111827" stroke="#4b5563" stroke-width="2"/><circle cx="42" cy="22" r="8" fill="#111827" stroke="#4b5563" stroke-width="2"/><circle cx="22" cy="42" r="8" fill="#111827" stroke="#4b5563" stroke-width="2"/><circle cx="42" cy="42" r="8" fill="#111827" stroke="#4b5563" stroke-width="2"/><circle cx="22" cy="22" r="4" fill="#dc2626" opacity="0.8"/><circle cx="42" cy="22" r="4" fill="#dc2626" opacity="0.8"/><circle cx="22" cy="42" r="4" fill="#dc2626" opacity="0.4"/><circle cx="42" cy="42" r="4" fill="#dc2626" opacity="0.4"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "spuele",
|
||||
name: "Spüle",
|
||||
filename: "kueche_spuele.svg",
|
||||
tags: ["spüle", "waschbecken", "küche", "abwasch"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="8" width="56" height="48" rx="3" fill="#9ca3af" stroke="#6b7280" stroke-width="2"/><rect x="8" y="12" width="24" height="32" rx="4" fill="#4b5563" stroke="#374151" stroke-width="2"/><rect x="36" y="12" width="20" height="32" rx="4" fill="#4b5563" stroke="#374151" stroke-width="2"/><circle cx="20" cy="28" r="3" fill="#1f2937"/><ellipse cx="46" cy="28" rx="6" ry="8" fill="#374151"/><circle cx="50" cy="6" r="4" fill="#6b7280" stroke="#4b5563" stroke-width="1"/><rect x="48" y="6" width="4" height="8" fill="#6b7280"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "kuehlschrank",
|
||||
name: "Kühlschrank",
|
||||
filename: "kueche_kuehlschrank.svg",
|
||||
tags: ["kühlschrank", "kühlen", "küche", "elektrogerät"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="10" y="4" width="44" height="56" rx="3" fill="#e5e7eb" stroke="#9ca3af" stroke-width="2"/><line x1="10" y1="24" x2="54" y2="24" stroke="#9ca3af" stroke-width="2"/><rect x="46" y="10" width="4" height="8" rx="1" fill="#6b7280"/><rect x="46" y="30" width="4" height="12" rx="1" fill="#6b7280"/><rect x="16" y="8" width="8" height="4" fill="#bfdbfe" rx="1"/><rect x="28" y="8" width="12" height="4" fill="#bfdbfe" rx="1"/><circle cx="20" cy="16" r="3" fill="#fbbf24"/><rect x="16" y="30" width="12" height="8" fill="#bbf7d0" rx="1"/><rect x="16" y="42" width="8" height="10" fill="#fecaca" rx="1"/><rect x="28" y="38" width="14" height="6" fill="#e0f2fe" rx="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "backofen",
|
||||
name: "Backofen",
|
||||
filename: "kueche_backofen.svg",
|
||||
tags: ["backofen", "ofen", "küche", "backen"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="6" y="4" width="52" height="56" rx="3" fill="#1f2937" stroke="#111827" stroke-width="2"/><rect x="10" y="18" width="44" height="38" rx="2" fill="#111827" stroke="#374151" stroke-width="2"/><rect x="14" y="22" width="36" height="30" fill="#292524" stroke="#4b5563" stroke-width="1"/><line x1="14" y1="32" x2="50" y2="32" stroke="#4b5563" stroke-width="1"/><line x1="14" y1="42" x2="50" y2="42" stroke="#4b5563" stroke-width="1"/><circle cx="16" cy="10" r="3" fill="#4b5563"/><circle cx="28" cy="10" r="3" fill="#4b5563"/><circle cx="40" cy="10" r="3" fill="#4b5563"/><rect x="46" y="8" width="8" height="4" rx="1" fill="#22c55e"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "spuelmaschine",
|
||||
name: "Spülmaschine",
|
||||
filename: "kueche_spuelmaschine.svg",
|
||||
tags: ["spülmaschine", "geschirrspüler", "küche", "elektrogerät"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="6" y="4" width="52" height="56" rx="3" fill="#e5e7eb" stroke="#9ca3af" stroke-width="2"/><rect x="10" y="16" width="44" height="40" rx="2" fill="#d1d5db" stroke="#9ca3af" stroke-width="1"/><rect x="10" y="8" width="44" height="6" fill="#9ca3af" rx="1"/><circle cx="16" cy="11" r="2" fill="#4b5563"/><rect x="22" y="9" width="12" height="4" rx="1" fill="#1f2937"/><circle cx="48" cy="11" r="2" fill="#22c55e"/><ellipse cx="32" cy="36" rx="16" ry="14" fill="#93c5fd" stroke="#3b82f6" stroke-width="2"/><line x1="32" y1="24" x2="32" y2="48" stroke="#3b82f6" stroke-width="1" stroke-dasharray="2,2"/><line x1="18" y1="36" x2="46" y2="36" stroke="#3b82f6" stroke-width="1" stroke-dasharray="2,2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "dunstabzug",
|
||||
name: "Dunstabzugshaube",
|
||||
filename: "kueche_dunstabzug.svg",
|
||||
tags: ["dunstabzug", "dunstabzugshaube", "küche", "abzug"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="8,32 56,32 52,56 12,56" fill="#9ca3af" stroke="#6b7280" stroke-width="2"/><rect x="20" y="4" width="24" height="28" fill="#78716c" stroke="#57534e" stroke-width="2"/><rect x="24" y="8" width="16" height="8" fill="#57534e" rx="1"/><rect x="14" y="36" width="36" height="4" fill="#6b7280"/><rect x="14" y="44" width="36" height="4" fill="#6b7280"/><circle cx="32" cy="52" r="2" fill="#4b5563"/><g stroke="#d1d5db" stroke-width="1" opacity="0.5"><path d="M20 20 Q24 16 28 20" fill="none"/><path d="M36 20 Q40 16 44 20" fill="none"/></g></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// ========== PFEILE (dynamisch) ==========
|
||||
pfeile: {
|
||||
name: "Richtungspfeile (Rot)",
|
||||
icon: "➡️",
|
||||
items: []
|
||||
},
|
||||
|
||||
// ========== KOMPASS (dynamisch) ==========
|
||||
kompass: {
|
||||
name: "Nordpfeile / Kompass",
|
||||
icon: "🧭",
|
||||
items: []
|
||||
},
|
||||
|
||||
// ========== VERMESSUNG - STATUS ==========
|
||||
vermessung_status: {
|
||||
name: "Vermessung - Status",
|
||||
icon: "📋",
|
||||
items: [
|
||||
{
|
||||
id: "vm_reparatur",
|
||||
name: "Reparatur",
|
||||
filename: "vermessung_reparatur.svg",
|
||||
tags: ["reparatur", "instandsetzung", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="16" font-weight="bold" fill="#000" text-anchor="middle">R</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_neu",
|
||||
name: "Neu",
|
||||
filename: "vermessung_neu.svg",
|
||||
tags: ["neu", "neubau", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="16" font-weight="bold" fill="#000" text-anchor="middle">N</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_bestand",
|
||||
name: "Bestand",
|
||||
filename: "vermessung_bestand.svg",
|
||||
tags: ["bestand", "bestehend", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="16" font-weight="bold" fill="#000" text-anchor="middle">B</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_abriss",
|
||||
name: "Abriss",
|
||||
filename: "vermessung_abriss.svg",
|
||||
tags: ["abriss", "rückbau", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="none" stroke="#000" stroke-width="2"/><line x1="12" y1="12" x2="52" y2="52" stroke="#000" stroke-width="2"/><line x1="52" y1="12" x2="12" y2="52" stroke="#000" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_geplant",
|
||||
name: "Geplant",
|
||||
filename: "vermessung_geplant.svg",
|
||||
tags: ["geplant", "planung", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="none" stroke="#000" stroke-width="2" stroke-dasharray="6,4"/><text x="32" y="38" font-family="Arial" font-size="16" font-weight="bold" fill="#000" text-anchor="middle">P</text></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// ========== VERMESSUNG - GRENZEN ==========
|
||||
vermessung_grenzen: {
|
||||
name: "Vermessung - Grenzen",
|
||||
icon: "📍",
|
||||
items: [
|
||||
{
|
||||
id: "vm_grundstuecksgrenze",
|
||||
name: "Grundstücksgrenze",
|
||||
filename: "vermessung_grundstuecksgrenze.svg",
|
||||
tags: ["grundstück", "grenze", "flurstück", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="3"/><line x1="12" y1="26" x2="12" y2="38" stroke="#000" stroke-width="2"/><line x1="52" y1="26" x2="52" y2="38" stroke="#000" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_grenzpunkt_vermarkt",
|
||||
name: "Grenzpunkt (vermarkt)",
|
||||
filename: "vermessung_grenzpunkt_vermarkt.svg",
|
||||
tags: ["grenzpunkt", "grenzstein", "vermarkt", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="12" fill="#000"/><circle cx="32" cy="32" r="6" fill="#fff"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_grenzpunkt_unvermarkt",
|
||||
name: "Grenzpunkt (unvermarkt)",
|
||||
filename: "vermessung_grenzpunkt_unvermarkt.svg",
|
||||
tags: ["grenzpunkt", "unvermarkt", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="10" fill="none" stroke="#000" stroke-width="2"/><line x1="32" y1="22" x2="32" y2="42" stroke="#000" stroke-width="2"/><line x1="22" y1="32" x2="42" y2="32" stroke="#000" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_flurstucksgrenze",
|
||||
name: "Flurstücksgrenze",
|
||||
filename: "vermessung_flurstucksgrenze.svg",
|
||||
tags: ["flurstück", "grenze", "kataster", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="2" stroke-dasharray="12,4"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_zaun",
|
||||
name: "Zaun",
|
||||
filename: "vermessung_zaun.svg",
|
||||
tags: ["zaun", "einfriedung", "grenze", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="1.5"/><line x1="12" y1="24" x2="12" y2="40" stroke="#000" stroke-width="1.5"/><line x1="24" y1="24" x2="24" y2="40" stroke="#000" stroke-width="1.5"/><line x1="36" y1="24" x2="36" y2="40" stroke="#000" stroke-width="1.5"/><line x1="48" y1="24" x2="48" y2="40" stroke="#000" stroke-width="1.5"/><line x1="12" y1="28" x2="24" y2="28" stroke="#000" stroke-width="1"/><line x1="24" y1="28" x2="36" y2="28" stroke="#000" stroke-width="1"/><line x1="36" y1="28" x2="48" y2="28" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_mauer",
|
||||
name: "Mauer",
|
||||
filename: "vermessung_mauer.svg",
|
||||
tags: ["mauer", "wand", "einfriedung", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="26" width="56" height="12" fill="none" stroke="#000" stroke-width="2"/><line x1="16" y1="26" x2="16" y2="38" stroke="#000" stroke-width="1"/><line x1="28" y1="26" x2="28" y2="38" stroke="#000" stroke-width="1"/><line x1="40" y1="26" x2="40" y2="38" stroke="#000" stroke-width="1"/><line x1="52" y1="26" x2="52" y2="38" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_hecke",
|
||||
name: "Hecke",
|
||||
filename: "vermessung_hecke.svg",
|
||||
tags: ["hecke", "grün", "bepflanzung", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="38" x2="60" y2="38" stroke="#000" stroke-width="1.5"/><circle cx="12" cy="32" r="6" fill="none" stroke="#000" stroke-width="1.5"/><circle cx="24" cy="30" r="7" fill="none" stroke="#000" stroke-width="1.5"/><circle cx="38" cy="31" r="6" fill="none" stroke="#000" stroke-width="1.5"/><circle cx="52" cy="32" r="6" fill="none" stroke="#000" stroke-width="1.5"/></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// ========== VERMESSUNG - WASSER ==========
|
||||
vermessung_wasser: {
|
||||
name: "Vermessung - Wasser",
|
||||
icon: "💧",
|
||||
items: [
|
||||
{
|
||||
id: "vm_hydrant_unterflur",
|
||||
name: "Hydrant (Unterflur)",
|
||||
filename: "vermessung_hydrant_unterflur.svg",
|
||||
tags: ["hydrant", "unterflur", "wasser", "feuerwehr", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="16" fill="none" stroke="#000" stroke-width="2"/><line x1="32" y1="16" x2="32" y2="48" stroke="#000" stroke-width="2"/><line x1="16" y1="32" x2="48" y2="32" stroke="#000" stroke-width="2"/><circle cx="32" cy="32" r="4" fill="#000"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_hydrant_ueberflur",
|
||||
name: "Hydrant (Überflur)",
|
||||
filename: "vermessung_hydrant_ueberflur.svg",
|
||||
tags: ["hydrant", "überflur", "wasser", "feuerwehr", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="32,8 48,24 48,56 16,56 16,24" fill="none" stroke="#000" stroke-width="2"/><line x1="16" y1="36" x2="48" y2="36" stroke="#000" stroke-width="2"/><circle cx="32" cy="46" r="4" fill="#000"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_wasserschacht",
|
||||
name: "Trinkwasserschacht",
|
||||
filename: "vermessung_wasserschacht.svg",
|
||||
tags: ["schacht", "wasser", "trinkwasser", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="16" y="16" width="32" height="32" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="14" font-weight="bold" fill="#000" text-anchor="middle">W</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_wasserschieber",
|
||||
name: "Wasserschieber",
|
||||
filename: "vermessung_wasserschieber.svg",
|
||||
tags: ["schieber", "absperrer", "wasser", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="8" y1="32" x2="56" y2="32" stroke="#000" stroke-width="2"/><line x1="32" y1="20" x2="32" y2="44" stroke="#000" stroke-width="3"/><circle cx="32" cy="32" r="6" fill="none" stroke="#000" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_brunnen",
|
||||
name: "Brunnen",
|
||||
filename: "vermessung_brunnen.svg",
|
||||
tags: ["brunnen", "wasser", "quelle", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="20" fill="none" stroke="#000" stroke-width="2"/><circle cx="32" cy="32" r="8" fill="none" stroke="#000" stroke-width="2"/><line x1="32" y1="12" x2="32" y2="4" stroke="#000" stroke-width="2"/><line x1="32" y1="52" x2="32" y2="60" stroke="#000" stroke-width="2"/><line x1="12" y1="32" x2="4" y2="32" stroke="#000" stroke-width="2"/><line x1="52" y1="32" x2="60" y2="32" stroke="#000" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_wasserleitung",
|
||||
name: "Wasserleitung",
|
||||
filename: "vermessung_wasserleitung.svg",
|
||||
tags: ["leitung", "wasser", "rohr", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="3"/><text x="32" y="24" font-family="Arial" font-size="10" fill="#000" text-anchor="middle">W</text></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// ========== VERMESSUNG - ABWASSER ==========
|
||||
vermessung_abwasser: {
|
||||
name: "Vermessung - Abwasser",
|
||||
icon: "🚰",
|
||||
items: [
|
||||
{
|
||||
id: "vm_abwasserschacht",
|
||||
name: "Abwasserschacht",
|
||||
filename: "vermessung_abwasserschacht.svg",
|
||||
tags: ["schacht", "abwasser", "kanal", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="16" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="14" font-weight="bold" fill="#000" text-anchor="middle">S</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_schacht_rund",
|
||||
name: "Schacht (rund)",
|
||||
filename: "vermessung_schacht_rund.svg",
|
||||
tags: ["schacht", "rund", "kanal", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="18" fill="none" stroke="#000" stroke-width="2"/><circle cx="32" cy="32" r="10" fill="none" stroke="#000" stroke-width="1.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_schacht_eckig",
|
||||
name: "Schacht (eckig)",
|
||||
filename: "vermessung_schacht_eckig.svg",
|
||||
tags: ["schacht", "eckig", "kanal", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="14" y="14" width="36" height="36" fill="none" stroke="#000" stroke-width="2"/><rect x="22" y="22" width="20" height="20" fill="none" stroke="#000" stroke-width="1.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_einlauf",
|
||||
name: "Einlauf / Gully",
|
||||
filename: "vermessung_einlauf.svg",
|
||||
tags: ["einlauf", "gully", "straßenablauf", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="18" y="18" width="28" height="28" fill="none" stroke="#000" stroke-width="2"/><line x1="22" y1="26" x2="42" y2="26" stroke="#000" stroke-width="1.5"/><line x1="22" y1="32" x2="42" y2="32" stroke="#000" stroke-width="1.5"/><line x1="22" y1="38" x2="42" y2="38" stroke="#000" stroke-width="1.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_abwasserleitung",
|
||||
name: "Abwasserleitung",
|
||||
filename: "vermessung_abwasserleitung.svg",
|
||||
tags: ["leitung", "abwasser", "kanal", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="2" stroke-dasharray="10,4"/></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// ========== VERMESSUNG - STROM ==========
|
||||
vermessung_strom: {
|
||||
name: "Vermessung - Strom",
|
||||
icon: "⚡",
|
||||
items: [
|
||||
{
|
||||
id: "vm_hausanschluss_elektro",
|
||||
name: "Hausanschluss Elektro",
|
||||
filename: "vermessung_hausanschluss_elektro.svg",
|
||||
tags: ["hausanschluss", "elektro", "strom", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="14" fill="none" stroke="#000" stroke-width="2"/><polygon points="32,20 26,34 30,34 28,44 38,30 34,30" fill="#000"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_laterne",
|
||||
name: "Laterne / Mast",
|
||||
filename: "vermessung_laterne.svg",
|
||||
tags: ["laterne", "mast", "beleuchtung", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="4" fill="#000"/><line x1="32" y1="8" x2="32" y2="28" stroke="#000" stroke-width="2"/><line x1="32" y1="36" x2="32" y2="56" stroke="#000" stroke-width="2"/><line x1="8" y1="32" x2="28" y2="32" stroke="#000" stroke-width="2"/><line x1="36" y1="32" x2="56" y2="32" stroke="#000" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_stromkabel",
|
||||
name: "Stromkabel",
|
||||
filename: "vermessung_stromkabel.svg",
|
||||
tags: ["kabel", "strom", "leitung", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="3"/><text x="32" y="24" font-family="Arial" font-size="10" fill="#000" text-anchor="middle">E</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_schaltkasten",
|
||||
name: "Schaltkasten",
|
||||
filename: "vermessung_schaltkasten.svg",
|
||||
tags: ["schaltkasten", "verteiler", "strom", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="16" y="12" width="32" height="40" fill="none" stroke="#000" stroke-width="2"/><line x1="16" y1="24" x2="48" y2="24" stroke="#000" stroke-width="1"/><text x="32" y="42" font-family="Arial" font-size="12" fill="#000" text-anchor="middle">E</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_trafostation",
|
||||
name: "Trafostation",
|
||||
filename: "vermessung_trafostation.svg",
|
||||
tags: ["trafo", "station", "umspanner", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="12" y="12" width="40" height="40" fill="none" stroke="#000" stroke-width="2"/><line x1="12" y1="12" x2="52" y2="52" stroke="#000" stroke-width="2"/><line x1="52" y1="12" x2="12" y2="52" stroke="#000" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_mast_holz",
|
||||
name: "Mast (Holz)",
|
||||
filename: "vermessung_mast_holz.svg",
|
||||
tags: ["mast", "holz", "freileitung", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="12" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="14" fill="#000" text-anchor="middle">H</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_mast_beton",
|
||||
name: "Mast (Beton)",
|
||||
filename: "vermessung_mast_beton.svg",
|
||||
tags: ["mast", "beton", "freileitung", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="12" fill="none" stroke="#000" stroke-width="2"/><circle cx="32" cy="32" r="6" fill="none" stroke="#000" stroke-width="1.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_mast_stahl",
|
||||
name: "Mast (Stahl)",
|
||||
filename: "vermessung_mast_stahl.svg",
|
||||
tags: ["mast", "stahl", "freileitung", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="20" y="20" width="24" height="24" fill="none" stroke="#000" stroke-width="2"/></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// ========== VERMESSUNG - GAS ==========
|
||||
vermessung_gas: {
|
||||
name: "Vermessung - Gas",
|
||||
icon: "🔥",
|
||||
items: [
|
||||
{
|
||||
id: "vm_gasschieber",
|
||||
name: "Gasschieber",
|
||||
filename: "vermessung_gasschieber.svg",
|
||||
tags: ["schieber", "absperrer", "gas", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="8" y1="32" x2="56" y2="32" stroke="#000" stroke-width="2" stroke-dasharray="8,4"/><line x1="32" y1="20" x2="32" y2="44" stroke="#000" stroke-width="3"/><text x="32" y="56" font-family="Arial" font-size="10" fill="#000" text-anchor="middle">G</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_gasleitung",
|
||||
name: "Gasleitung",
|
||||
filename: "vermessung_gasleitung.svg",
|
||||
tags: ["leitung", "gas", "rohr", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="2" stroke-dasharray="8,4"/><text x="32" y="24" font-family="Arial" font-size="10" fill="#000" text-anchor="middle">G</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_hausanschluss_gas",
|
||||
name: "Hausanschluss Gas",
|
||||
filename: "vermessung_hausanschluss_gas.svg",
|
||||
tags: ["hausanschluss", "gas", "anschluss", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="18" y="18" width="28" height="28" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="14" font-weight="bold" fill="#000" text-anchor="middle">G</text></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// ========== VERMESSUNG - VERKEHR ==========
|
||||
vermessung_verkehr: {
|
||||
name: "Vermessung - Verkehr",
|
||||
icon: "🚗",
|
||||
items: [
|
||||
{
|
||||
id: "vm_gleise",
|
||||
name: "Gleise / Schienen",
|
||||
filename: "vermessung_gleise.svg",
|
||||
tags: ["gleise", "schienen", "bahn", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="24" x2="60" y2="24" stroke="#000" stroke-width="2"/><line x1="4" y1="40" x2="60" y2="40" stroke="#000" stroke-width="2"/><line x1="12" y1="24" x2="12" y2="40" stroke="#000" stroke-width="1.5"/><line x1="24" y1="24" x2="24" y2="40" stroke="#000" stroke-width="1.5"/><line x1="36" y1="24" x2="36" y2="40" stroke="#000" stroke-width="1.5"/><line x1="48" y1="24" x2="48" y2="40" stroke="#000" stroke-width="1.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_prellbock",
|
||||
name: "Prellbock",
|
||||
filename: "vermessung_prellbock.svg",
|
||||
tags: ["prellbock", "gleisende", "bahn", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="40" y2="32" stroke="#000" stroke-width="2"/><line x1="40" y1="16" x2="40" y2="48" stroke="#000" stroke-width="4"/><line x1="44" y1="20" x2="56" y2="20" stroke="#000" stroke-width="2"/><line x1="44" y1="44" x2="56" y2="44" stroke="#000" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_verkehrsschild",
|
||||
name: "Verkehrsschild",
|
||||
filename: "vermessung_verkehrsschild.svg",
|
||||
tags: ["schild", "verkehr", "straße", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="32" y1="36" x2="32" y2="60" stroke="#000" stroke-width="2"/><polygon points="32,8 50,24 50,36 14,36 14,24" fill="none" stroke="#000" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_ampel",
|
||||
name: "Ampel",
|
||||
filename: "vermessung_ampel.svg",
|
||||
tags: ["ampel", "signal", "verkehr", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="22" y="8" width="20" height="40" fill="none" stroke="#000" stroke-width="2"/><circle cx="32" cy="18" r="5" fill="none" stroke="#000" stroke-width="1.5"/><circle cx="32" cy="28" r="5" fill="none" stroke="#000" stroke-width="1.5"/><circle cx="32" cy="38" r="5" fill="none" stroke="#000" stroke-width="1.5"/><line x1="32" y1="48" x2="32" y2="60" stroke="#000" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_haltestelle",
|
||||
name: "Haltestelle",
|
||||
filename: "vermessung_haltestelle.svg",
|
||||
tags: ["haltestelle", "bus", "bahn", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="20" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="16" font-weight="bold" fill="#000" text-anchor="middle">H</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_parkplatz",
|
||||
name: "Parkplatz",
|
||||
filename: "vermessung_parkplatz.svg",
|
||||
tags: ["parkplatz", "parken", "stellplatz", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="14" y="14" width="36" height="36" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="40" font-family="Arial" font-size="24" font-weight="bold" fill="#000" text-anchor="middle">P</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_schranke",
|
||||
name: "Schranke",
|
||||
filename: "vermessung_schranke.svg",
|
||||
tags: ["schranke", "bahnübergang", "absperrung", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="12" cy="32" r="6" fill="none" stroke="#000" stroke-width="2"/><line x1="18" y1="32" x2="60" y2="32" stroke="#000" stroke-width="3"/><line x1="24" y1="28" x2="28" y2="36" stroke="#000" stroke-width="2"/><line x1="36" y1="28" x2="40" y2="36" stroke="#000" stroke-width="2"/><line x1="48" y1="28" x2="52" y2="36" stroke="#000" stroke-width="2"/></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// ========== VERMESSUNG - TOPOGRAFIE ==========
|
||||
vermessung_topografie: {
|
||||
name: "Vermessung - Topografie",
|
||||
icon: "🌳",
|
||||
items: [
|
||||
{
|
||||
id: "vm_laubbaum",
|
||||
name: "Laubbaum",
|
||||
filename: "vermessung_laubbaum.svg",
|
||||
tags: ["baum", "laubbaum", "vegetation", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="28" r="18" fill="none" stroke="#000" stroke-width="2"/><line x1="32" y1="46" x2="32" y2="60" stroke="#000" stroke-width="3"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_nadelbaum",
|
||||
name: "Nadelbaum",
|
||||
filename: "vermessung_nadelbaum.svg",
|
||||
tags: ["baum", "nadelbaum", "tanne", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="32,4 48,28 40,28 52,48 12,48 24,28 16,28" fill="none" stroke="#000" stroke-width="2"/><line x1="32" y1="48" x2="32" y2="60" stroke="#000" stroke-width="3"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_gebaeude",
|
||||
name: "Gebäude",
|
||||
filename: "vermessung_gebaeude.svg",
|
||||
tags: ["gebäude", "haus", "bauwerk", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="12" y="20" width="40" height="36" fill="none" stroke="#000" stroke-width="2"/><line x1="12" y1="20" x2="32" y2="8" stroke="#000" stroke-width="2"/><line x1="52" y1="20" x2="32" y2="8" stroke="#000" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_hoehenpunkt",
|
||||
name: "Höhenpunkt",
|
||||
filename: "vermessung_hoehenpunkt.svg",
|
||||
tags: ["höhe", "nivellement", "punkt", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="22" y1="42" x2="42" y2="42" stroke="#000" stroke-width="2"/><line x1="32" y1="42" x2="32" y2="22" stroke="#000" stroke-width="2"/><circle cx="32" cy="22" r="4" fill="#000"/><text x="46" y="28" font-family="Arial" font-size="10" fill="#000">HP</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_boeschung",
|
||||
name: "Böschung",
|
||||
filename: "vermessung_boeschung.svg",
|
||||
tags: ["böschung", "hang", "gelände", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="8" y1="20" x2="56" y2="20" stroke="#000" stroke-width="2"/><line x1="8" y1="44" x2="56" y2="44" stroke="#000" stroke-width="2"/><line x1="12" y1="20" x2="8" y2="44" stroke="#000" stroke-width="1"/><line x1="20" y1="20" x2="16" y2="44" stroke="#000" stroke-width="1"/><line x1="28" y1="20" x2="24" y2="44" stroke="#000" stroke-width="1"/><line x1="36" y1="20" x2="32" y2="44" stroke="#000" stroke-width="1"/><line x1="44" y1="20" x2="40" y2="44" stroke="#000" stroke-width="1"/><line x1="52" y1="20" x2="48" y2="44" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_fliessrichtung",
|
||||
name: "Fließrichtung",
|
||||
filename: "vermessung_fliessrichtung.svg",
|
||||
tags: ["fließrichtung", "gewässer", "bach", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="8" y1="32" x2="48" y2="32" stroke="#000" stroke-width="2"/><polygon points="56,32 44,24 44,40" fill="#000"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_quelle",
|
||||
name: "Quelle",
|
||||
filename: "vermessung_quelle.svg",
|
||||
tags: ["quelle", "wasser", "ursprung", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="16" fill="none" stroke="#000" stroke-width="2"/><path d="M32 24 Q36 28 32 32 Q28 36 32 40" stroke="#000" stroke-width="2" fill="none"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_durchlass",
|
||||
name: "Durchlass",
|
||||
filename: "vermessung_durchlass.svg",
|
||||
tags: ["durchlass", "rohr", "kanal", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="24" width="48" height="16" fill="none" stroke="#000" stroke-width="2"/><line x1="8" y1="32" x2="0" y2="32" stroke="#000" stroke-width="2"/><line x1="56" y1="32" x2="64" y2="32" stroke="#000" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_kilometerstein",
|
||||
name: "Kilometerstein",
|
||||
filename: "vermessung_kilometerstein.svg",
|
||||
tags: ["kilometer", "stein", "markierung", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="32,8 44,20 44,56 20,56 20,20" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="42" font-family="Arial" font-size="12" fill="#000" text-anchor="middle">km</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_poller",
|
||||
name: "Poller",
|
||||
filename: "vermessung_poller.svg",
|
||||
tags: ["poller", "absperrung", "pfosten", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="10" fill="#000"/><circle cx="32" cy="32" r="4" fill="#fff"/></svg>`
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
// ========== DYNAMISCHE PFEILE GENERIEREN ==========
|
||||
function generateArrowSVG(angle) {
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="rotate(${angle}, 32, 32)"><rect x="28" y="20" width="8" height="30" fill="#dc2626"/><polygon points="32,4 16,24 24,24 24,20 40,20 40,24 48,24" fill="#dc2626"/></g></svg>`;
|
||||
}
|
||||
|
||||
function generateNorthArrowSVG(angle) {
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="rotate(${angle}, 32, 32)"><circle cx="32" cy="32" r="28" fill="none" stroke="#374151" stroke-width="2"/><polygon points="32,6 26,32 32,28 38,32" fill="#dc2626"/><polygon points="32,58 26,32 32,36 38,32" fill="#ffffff" stroke="#374151" stroke-width="1"/><text x="32" y="18" font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="#1f2937" text-anchor="middle">N</text></g></svg>`;
|
||||
}
|
||||
|
||||
// Pfeile und Kompass generieren
|
||||
for (let angle = 0; angle < 360; angle += 15) {
|
||||
SYMBOLS.pfeile.items.push({
|
||||
id: `pfeil_${angle}`,
|
||||
name: `${angle}°`,
|
||||
filename: `richtungspfeil_rot_${angle}grad.svg`,
|
||||
tags: ["pfeil", "richtung", "rot", angle.toString()],
|
||||
svg: generateArrowSVG(angle)
|
||||
});
|
||||
|
||||
SYMBOLS.kompass.items.push({
|
||||
id: `nord_${angle}`,
|
||||
name: `${angle}°`,
|
||||
filename: `kompass_nord_${angle}grad.svg`,
|
||||
tags: ["nord", "kompass", "himmelsrichtung", angle.toString()],
|
||||
svg: generateNorthArrowSVG(angle)
|
||||
});
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -319,3 +319,44 @@ window.downloadStandaloneArrowDXF = function() {
|
||||
window.TextExport.downloadDxf(svg, 'pfeil.dxf');
|
||||
}
|
||||
};
|
||||
|
||||
// Zur Legende hinzufuegen
|
||||
window.addTextToLegend = function() {
|
||||
var state = window.TextGenState.current;
|
||||
var svg = window.SvgGenerator.generate(state);
|
||||
var name = state.text || 'Text-Symbol';
|
||||
|
||||
if (typeof legendItems !== 'undefined' && typeof updateLegendCount === 'function') {
|
||||
legendItems.push({
|
||||
id: 'text_' + Date.now(),
|
||||
name: name.split('\n')[0].substring(0, 30),
|
||||
svg: svg,
|
||||
description: ''
|
||||
});
|
||||
updateLegendCount();
|
||||
saveLegendToStorage();
|
||||
if (typeof showNotification === 'function') {
|
||||
showNotification('Zur Legende hinzugefuegt!');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addStandaloneArrowToLegend = function() {
|
||||
var state = window.TextGenState.current;
|
||||
var svg = window.SvgGenerator.generateArrowOnly(state);
|
||||
if (!svg) return;
|
||||
|
||||
if (typeof legendItems !== 'undefined' && typeof updateLegendCount === 'function') {
|
||||
legendItems.push({
|
||||
id: 'arrow_' + Date.now(),
|
||||
name: 'Pfeil ' + state.arrow,
|
||||
svg: svg,
|
||||
description: ''
|
||||
});
|
||||
updateLegendCount();
|
||||
saveLegendToStorage();
|
||||
if (typeof showNotification === 'function') {
|
||||
showNotification('Pfeil zur Legende hinzugefuegt!');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -44,9 +44,19 @@ var SvgGenerator = {
|
||||
case 'rect':
|
||||
shapeEl = draw.rect(width, height).move(x, y).radius(4);
|
||||
break;
|
||||
case 'square':
|
||||
var squareSize = Math.max(width, height);
|
||||
var squareX = x - (squareSize - width) / 2;
|
||||
var squareY = y - (squareSize - height) / 2;
|
||||
shapeEl = draw.rect(squareSize, squareSize).move(squareX, squareY).radius(4);
|
||||
break;
|
||||
case 'rounded':
|
||||
shapeEl = draw.rect(width, height).move(x, y).radius(Math.min(halfW, halfH) * 0.5);
|
||||
break;
|
||||
case 'circle':
|
||||
var circleRadius = Math.max(halfW, halfH);
|
||||
shapeEl = draw.circle(circleRadius * 2).center(cx, cy);
|
||||
break;
|
||||
case 'oval':
|
||||
shapeEl = draw.ellipse(width, height).center(cx, cy);
|
||||
break;
|
||||
|
||||
@@ -18,11 +18,13 @@ var UiBindings = {
|
||||
var e = this.elements;
|
||||
|
||||
// Text & Farben
|
||||
e.textInput = document.getElementById('textInput');
|
||||
e.textInput = document.getElementById('customText');
|
||||
e.fontSizeInput = document.getElementById('fontSize');
|
||||
e.fontSizeValue = document.getElementById('fontSizeValue');
|
||||
e.textColorInput = document.getElementById('textColor');
|
||||
e.textColorValue = document.getElementById('textColorValue');
|
||||
e.frameColorInput = document.getElementById('frameColor');
|
||||
e.frameColorValue = document.getElementById('frameColorValue');
|
||||
|
||||
// Rahmen
|
||||
e.frameScaleInput = document.getElementById('frameScale');
|
||||
@@ -30,16 +32,16 @@ var UiBindings = {
|
||||
e.frameScaleRow = document.getElementById('frameScaleRow');
|
||||
|
||||
// Padding
|
||||
e.paddingAllInput = document.getElementById('framePaddingAll');
|
||||
e.paddingAllValue = document.getElementById('framePaddingAllValue');
|
||||
e.paddingTopInput = document.getElementById('framePaddingTop');
|
||||
e.paddingTopValue = document.getElementById('framePaddingTopValue');
|
||||
e.paddingRightInput = document.getElementById('framePaddingRight');
|
||||
e.paddingRightValue = document.getElementById('framePaddingRightValue');
|
||||
e.paddingBottomInput = document.getElementById('framePaddingBottom');
|
||||
e.paddingBottomValue = document.getElementById('framePaddingBottomValue');
|
||||
e.paddingLeftInput = document.getElementById('framePaddingLeft');
|
||||
e.paddingLeftValue = document.getElementById('framePaddingLeftValue');
|
||||
e.paddingAllInput = document.getElementById('paddingAll');
|
||||
e.paddingAllValue = document.getElementById('paddingAllValue');
|
||||
e.paddingTopInput = document.getElementById('paddingTop');
|
||||
e.paddingTopValue = document.getElementById('paddingTopValue');
|
||||
e.paddingRightInput = document.getElementById('paddingRight');
|
||||
e.paddingRightValue = document.getElementById('paddingRightValue');
|
||||
e.paddingBottomInput = document.getElementById('paddingBottom');
|
||||
e.paddingBottomValue = document.getElementById('paddingBottomValue');
|
||||
e.paddingLeftInput = document.getElementById('paddingLeft');
|
||||
e.paddingLeftValue = document.getElementById('paddingLeftValue');
|
||||
e.paddingAllRow = document.getElementById('framePaddingAllRow');
|
||||
e.paddingRow = document.getElementById('framePaddingRow');
|
||||
|
||||
@@ -64,8 +66,8 @@ var UiBindings = {
|
||||
// Buttons
|
||||
e.shapeButtons = document.querySelectorAll('.shape-btn');
|
||||
e.arrowButtons = document.querySelectorAll('.arrow-btn');
|
||||
e.lineStyleButtons = document.querySelectorAll('.line-style-btn');
|
||||
e.lineWeightButtons = document.querySelectorAll('.line-weight-btn');
|
||||
e.lineStyleButtons = document.querySelectorAll('.line-btn');
|
||||
e.lineWeightButtons = document.querySelectorAll('.weight-btn');
|
||||
},
|
||||
|
||||
bindEvents: function() {
|
||||
@@ -95,12 +97,14 @@ var UiBindings = {
|
||||
if (e.textColorInput) {
|
||||
e.textColorInput.addEventListener('input', function(ev) {
|
||||
state.set('textColor', ev.target.value);
|
||||
if (e.textColorValue) e.textColorValue.textContent = ev.target.value;
|
||||
self.updatePreview();
|
||||
});
|
||||
}
|
||||
if (e.frameColorInput) {
|
||||
e.frameColorInput.addEventListener('input', function(ev) {
|
||||
state.set('frameColor', ev.target.value);
|
||||
if (e.frameColorValue) e.frameColorValue.textContent = ev.target.value;
|
||||
self.updatePreview();
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,912 +0,0 @@
|
||||
// ============================================
|
||||
// SYMBOL-DEFINITIONEN
|
||||
// Gutachter Symbolbibliothek v2.0
|
||||
// ============================================
|
||||
|
||||
const SYMBOLS = {
|
||||
// ========== SCHADENSARTEN ==========
|
||||
schaeden: {
|
||||
name: "Schadensarten",
|
||||
icon: "🔥",
|
||||
items: [
|
||||
{
|
||||
id: "wasserschaden",
|
||||
name: "Wasserschaden",
|
||||
filename: "wasserschaden_symbol.svg",
|
||||
tags: ["wasser", "feuchtigkeit", "nass"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 4 C32 4 12 28 12 42 C12 53 21 60 32 60 C43 60 52 53 52 42 C52 28 32 4 32 4 Z" fill="#3b82f6" stroke="#2563eb" stroke-width="2"/><ellipse cx="24" cy="38" rx="6" ry="10" fill="#93c5fd" opacity="0.5"/><circle cx="22" cy="32" r="3" fill="#dbeafe" opacity="0.7"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="38" font-family="Arial" font-size="20" fill="#000" text-anchor="middle">W</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "brandschaden",
|
||||
name: "Brandschaden",
|
||||
filename: "brandschaden_symbol.svg",
|
||||
tags: ["feuer", "brand", "flamme"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 2 C32 2 18 18 18 34 C18 42 22 50 28 54 C24 48 24 40 28 34 C28 42 32 48 38 50 C34 44 36 36 40 32 C40 40 44 46 48 48 C50 44 52 38 52 34 C52 18 32 2 32 2 Z" fill="#f97316" stroke="#ea580c" stroke-width="1"/><path d="M32 14 C32 14 22 26 22 38 C22 44 26 50 32 52 C28 48 28 42 32 38 C32 44 36 48 40 48 C44 44 46 40 46 36 C46 26 32 14 32 14 Z" fill="#fb923c"/><path d="M32 26 C32 26 26 34 26 42 C26 46 28 50 32 52 C30 48 30 44 32 42 C34 46 36 48 38 48 C40 46 42 44 42 42 C42 34 32 26 32 26 Z" fill="#fbbf24"/><ellipse cx="32" cy="48" rx="4" ry="6" fill="#fef08a"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="38" font-family="Arial" font-size="20" fill="#000" text-anchor="middle">B</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "rauchschaden",
|
||||
name: "Rauchschaden",
|
||||
filename: "rauchschaden_symbol.svg",
|
||||
tags: ["rauch", "russ", "qualm"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="54" rx="14" ry="6" fill="#4b5563" opacity="0.9"/><ellipse cx="24" cy="42" rx="10" ry="8" fill="#6b7280" opacity="0.8"/><ellipse cx="40" cy="40" rx="12" ry="9" fill="#6b7280" opacity="0.75"/><ellipse cx="32" cy="28" rx="14" ry="10" fill="#9ca3af" opacity="0.7"/><ellipse cx="20" cy="24" rx="8" ry="7" fill="#9ca3af" opacity="0.6"/><ellipse cx="44" cy="26" rx="9" ry="7" fill="#9ca3af" opacity="0.6"/><ellipse cx="32" cy="14" rx="10" ry="7" fill="#d1d5db" opacity="0.5"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="38" font-family="Arial" font-size="20" fill="#000" text-anchor="middle">R</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "leitungswasser",
|
||||
name: "Leitungswasser / Rohrbruch",
|
||||
filename: "leitungswasserschaden_symbol.svg",
|
||||
tags: ["rohr", "leitung", "bruch", "wasser"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="2" y="24" width="22" height="16" rx="2" fill="#71717a" stroke="#52525b" stroke-width="2"/><rect x="20" y="22" width="6" height="20" rx="1" fill="#a1a1aa" stroke="#71717a" stroke-width="1"/><rect x="40" y="24" width="22" height="16" rx="2" fill="#71717a" stroke="#52525b" stroke-width="2"/><rect x="38" y="22" width="6" height="20" rx="1" fill="#a1a1aa" stroke="#71717a" stroke-width="1"/><path d="M26 22 L28 28 L26 32 L28 36 L26 42" stroke="#dc2626" stroke-width="2" fill="none" stroke-linecap="round"/><path d="M38 22 L36 28 L38 32 L36 36 L38 42" stroke="#dc2626" stroke-width="2" fill="none" stroke-linecap="round"/><path d="M30 28 Q34 20 38 10" stroke="#3b82f6" stroke-width="3" fill="none" stroke-linecap="round"/><path d="M31 32 Q36 32 42 28" stroke="#3b82f6" stroke-width="3" fill="none" stroke-linecap="round"/><path d="M30 36 Q34 44 38 54" stroke="#3b82f6" stroke-width="3" fill="none" stroke-linecap="round"/><circle cx="40" cy="8" r="3" fill="#60a5fa"/><circle cx="36" cy="56" r="3" fill="#60a5fa"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="38" font-family="Arial" font-size="16" fill="#000" text-anchor="middle">LW</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "schimmel",
|
||||
name: "Schimmelschaden",
|
||||
filename: "schimmelschaden_symbol.svg",
|
||||
tags: ["schimmel", "pilz", "feucht", "sporen"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="34" rx="24" ry="20" fill="#1f2937" opacity="0.3"/><ellipse cx="24" cy="28" rx="10" ry="8" fill="#166534"/><ellipse cx="38" cy="32" rx="12" ry="10" fill="#15803d"/><ellipse cx="28" cy="40" rx="9" ry="7" fill="#166534"/><ellipse cx="42" cy="24" rx="7" ry="6" fill="#14532d"/><ellipse cx="18" cy="38" rx="6" ry="5" fill="#15803d"/><circle cx="20" cy="26" r="2" fill="#052e16"/><circle cx="30" cy="30" r="2.5" fill="#052e16"/><circle cx="40" cy="28" r="2" fill="#052e16"/><circle cx="35" cy="38" r="2" fill="#052e16"/><circle cx="52" cy="12" r="10" fill="#dc2626"/><text x="52" y="17" font-family="Arial" font-size="14" font-weight="bold" fill="white" text-anchor="middle">!</text></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="38" font-family="Arial" font-size="20" fill="#000" text-anchor="middle">S</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "sturm",
|
||||
name: "Sturmschaden",
|
||||
filename: "sturmschaden_symbol.svg",
|
||||
tags: ["sturm", "wind", "dach", "unwetter"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="14" y="32" width="28" height="24" fill="#78716c" stroke="#57534e" stroke-width="2"/><polygon points="10,32 28,14 50,32" fill="#991b1b" stroke="#7f1d1d" stroke-width="2"/><polygon points="38,18 46,26 50,22 42,14" fill="#78716c" stroke="#57534e" stroke-width="1"/><rect x="18" y="38" width="8" height="8" fill="#bfdbfe" stroke="#57534e" stroke-width="1"/><rect x="30" y="38" width="8" height="8" fill="#bfdbfe" stroke="#57534e" stroke-width="1"/><rect x="24" y="46" width="8" height="10" fill="#44403c"/><path d="M48 10 Q56 10 54 6" stroke="#6b7280" stroke-width="3" fill="none" stroke-linecap="round"/><path d="M50 18 Q60 18 58 14" stroke="#6b7280" stroke-width="3" fill="none" stroke-linecap="round"/><path d="M52 26 Q62 26 60 22" stroke="#6b7280" stroke-width="2" fill="none" stroke-linecap="round"/><rect x="54" y="8" width="6" height="3" fill="#991b1b" transform="rotate(25 57 9)"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="38" font-family="Arial" font-size="16" fill="#000" text-anchor="middle">ST</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "einbruch",
|
||||
name: "Einbruchschaden",
|
||||
filename: "einbruchschaden_symbol.svg",
|
||||
tags: ["einbruch", "diebstahl", "fenster", "tür"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="8" width="48" height="48" fill="none" stroke="#57534e" stroke-width="4" rx="2"/><line x1="32" y1="8" x2="32" y2="56" stroke="#57534e" stroke-width="3"/><line x1="8" y1="32" x2="56" y2="32" stroke="#57534e" stroke-width="3"/><polygon points="12,12 20,20 12,28 18,20" fill="#bfdbfe" stroke="#93c5fd" stroke-width="1"/><polygon points="20,14 28,12 24,24 16,20" fill="#dbeafe" stroke="#93c5fd" stroke-width="1"/><polygon points="10,36 18,42 12,52 8,44" fill="#bfdbfe" stroke="#93c5fd" stroke-width="1"/><rect x="36" y="16" width="4" height="32" rx="1" fill="#1f2937" transform="rotate(20 38 32)"/><rect x="34" y="14" width="8" height="6" rx="1" fill="#1f2937" transform="rotate(20 38 17)"/><circle cx="52" cy="52" r="8" fill="#dc2626"/><line x1="48" y1="48" x2="56" y2="56" stroke="white" stroke-width="2" stroke-linecap="round"/><line x1="56" y1="48" x2="48" y2="56" stroke="white" stroke-width="2" stroke-linecap="round"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="38" font-family="Arial" font-size="16" fill="#000" text-anchor="middle">EB</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "elektro",
|
||||
name: "Elektroschaden",
|
||||
filename: "elektroschaden_symbol.svg",
|
||||
tags: ["elektro", "strom", "blitz", "kurzschluss"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="36,2 20,28 30,28 24,46 44,18 34,18" fill="#fbbf24" stroke="#f59e0b" stroke-width="2" stroke-linejoin="round"/><rect x="12" y="38" width="24" height="22" rx="3" fill="#e5e7eb" stroke="#9ca3af" stroke-width="2"/><circle cx="20" cy="46" r="3" fill="#1f2937"/><circle cx="28" cy="46" r="3" fill="#1f2937"/><rect x="22" y="52" width="4" height="4" rx="1" fill="#1f2937"/><line x1="40" y1="42" x2="48" y2="38" stroke="#f59e0b" stroke-width="2" stroke-linecap="round"/><line x1="42" y1="48" x2="52" y2="46" stroke="#f59e0b" stroke-width="2" stroke-linecap="round"/><line x1="40" y1="54" x2="50" y2="56" stroke="#f59e0b" stroke-width="2" stroke-linecap="round"/><polygon points="50,36 46,42 48,42 46,48 52,40 50,40" fill="#fbbf24"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="38" font-family="Arial" font-size="20" fill="#000" text-anchor="middle">E</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "hagel",
|
||||
name: "Hagelschaden",
|
||||
filename: "hagelschaden_symbol.svg",
|
||||
tags: ["hagel", "eis", "dellen", "unwetter"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="20" rx="24" ry="14" fill="#6b7280"/><ellipse cx="32" cy="18" rx="22" ry="12" fill="#9ca3af"/><circle cx="14" cy="36" r="6" fill="#e0f2fe" stroke="#7dd3fc" stroke-width="2"/><circle cx="32" cy="40" r="7" fill="#e0f2fe" stroke="#7dd3fc" stroke-width="2"/><circle cx="50" cy="34" r="5" fill="#e0f2fe" stroke="#7dd3fc" stroke-width="2"/><circle cx="22" cy="52" r="6" fill="#e0f2fe" stroke="#7dd3fc" stroke-width="2"/><circle cx="44" cy="50" r="5" fill="#e0f2fe" stroke="#7dd3fc" stroke-width="2"/><line x1="14" y1="26" x2="14" y2="30" stroke="#7dd3fc" stroke-width="2"/><line x1="32" y1="24" x2="32" y2="32" stroke="#7dd3fc" stroke-width="2"/><line x1="50" y1="26" x2="50" y2="28" stroke="#7dd3fc" stroke-width="2"/><line x1="22" y1="28" x2="22" y2="46" stroke="#7dd3fc" stroke-width="1.5"/><line x1="44" y1="28" x2="44" y2="44" stroke="#7dd3fc" stroke-width="1.5"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="38" font-family="Arial" font-size="20" fill="#000" text-anchor="middle">H</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vandalismus",
|
||||
name: "Vandalismus",
|
||||
filename: "vandalismus_symbol.svg",
|
||||
tags: ["vandalismus", "graffiti", "zerstörung", "sachbeschädigung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="20" width="56" height="40" fill="#d6d3d1" stroke="#78716c" stroke-width="2"/><path d="M10 30 Q20 25 30 35 Q40 45 50 30" stroke="#dc2626" stroke-width="4" fill="none" stroke-linecap="round"/><path d="M15 45 Q25 55 35 40 Q45 25 55 45" stroke="#2563eb" stroke-width="3" fill="none" stroke-linecap="round"/><text x="32" y="54" font-family="Arial" font-size="10" fill="#000" text-anchor="middle" font-style="italic">TAG</text><circle cx="52" cy="12" r="10" fill="#dc2626"/><line x1="48" y1="8" x2="56" y2="16" stroke="white" stroke-width="2.5" stroke-linecap="round"/><line x1="56" y1="8" x2="48" y2="16" stroke="white" stroke-width="2.5" stroke-linecap="round"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="38" font-family="Arial" font-size="20" fill="#000" text-anchor="middle">V</text></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// ========== WERKZEUGE & MARKIERUNGEN ==========
|
||||
werkzeuge: {
|
||||
name: "Werkzeuge & Markierungen",
|
||||
icon: "🔧",
|
||||
items: [
|
||||
{
|
||||
id: "massstab",
|
||||
name: "Maßstab 1m",
|
||||
filename: "massstab_1m.svg",
|
||||
tags: ["maßstab", "meter", "lineal", "messen"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="24" width="56" height="16" fill="#fef3c7" stroke="#f59e0b" stroke-width="2"/><g stroke="#92400e" stroke-width="1"><line x1="4" y1="28" x2="4" y2="36"/><line x1="10" y1="30" x2="10" y2="34"/><line x1="16" y1="30" x2="16" y2="34"/><line x1="22" y1="30" x2="22" y2="34"/><line x1="28" y1="30" x2="28" y2="34"/><line x1="32" y1="28" x2="32" y2="36"/><line x1="38" y1="30" x2="38" y2="34"/><line x1="44" y1="30" x2="44" y2="34"/><line x1="50" y1="30" x2="50" y2="34"/><line x1="56" y1="30" x2="56" y2="34"/><line x1="60" y1="28" x2="60" y2="36"/></g><text x="8" y="22" font-family="Arial" font-size="8" fill="#92400e">0</text><text x="28" y="22" font-family="Arial" font-size="8" fill="#92400e">50</text><text x="54" y="22" font-family="Arial" font-size="8" fill="#92400e">100</text><text x="32" y="48" font-family="Arial" font-size="10" fill="#92400e" text-anchor="middle">1 Meter</text></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="24" width="56" height="16" fill="none" stroke="#000" stroke-width="1"/><line x1="4" y1="28" x2="4" y2="36" stroke="#000" stroke-width="1"/><line x1="32" y1="28" x2="32" y2="36" stroke="#000" stroke-width="1"/><line x1="60" y1="28" x2="60" y2="36" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "messpunkt",
|
||||
name: "Messpunkt",
|
||||
filename: "messpunkt.svg",
|
||||
tags: ["messpunkt", "markierung", "punkt", "messen"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#dc2626" stroke-width="3"/><circle cx="32" cy="32" r="16" fill="none" stroke="#dc2626" stroke-width="2"/><circle cx="32" cy="32" r="6" fill="#dc2626"/><line x1="32" y1="2" x2="32" y2="14" stroke="#dc2626" stroke-width="2"/><line x1="32" y1="50" x2="32" y2="62" stroke="#dc2626" stroke-width="2"/><line x1="2" y1="32" x2="14" y2="32" stroke="#dc2626" stroke-width="2"/><line x1="50" y1="32" x2="62" y2="32" stroke="#dc2626" stroke-width="2"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><circle cx="32" cy="32" r="4" fill="none" stroke="#000" stroke-width="1"/><line x1="32" y1="4" x2="32" y2="60" stroke="#000" stroke-width="0.5"/><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="0.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "kamera",
|
||||
name: "Fotostandpunkt",
|
||||
filename: "fotostandpunkt.svg",
|
||||
tags: ["foto", "kamera", "standpunkt", "aufnahme"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="20" width="48" height="32" rx="4" fill="#374151" stroke="#1f2937" stroke-width="2"/><circle cx="32" cy="36" r="12" fill="#1f2937" stroke="#6b7280" stroke-width="2"/><circle cx="32" cy="36" r="8" fill="#3b82f6"/><circle cx="32" cy="36" r="4" fill="#1e3a5f"/><rect x="20" y="14" width="24" height="8" rx="2" fill="#4b5563"/><circle cx="48" cy="26" r="3" fill="#fbbf24"/><rect x="10" y="26" width="6" height="4" rx="1" fill="#6b7280"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="38" font-family="Arial" font-size="16" fill="#000" text-anchor="middle">FO</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "lupe",
|
||||
name: "Detailbereich",
|
||||
filename: "detailbereich.svg",
|
||||
tags: ["detail", "lupe", "vergrößerung", "zoom"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="26" cy="26" r="20" fill="#dbeafe" stroke="#3b82f6" stroke-width="3"/><circle cx="26" cy="26" r="14" fill="white" stroke="#93c5fd" stroke-width="2"/><line x1="40" y1="40" x2="58" y2="58" stroke="#3b82f6" stroke-width="6" stroke-linecap="round"/><line x1="40" y1="40" x2="56" y2="56" stroke="#60a5fa" stroke-width="3" stroke-linecap="round"/><text x="26" y="30" font-family="Arial" font-size="14" fill="#3b82f6" text-anchor="middle" font-weight="bold">+</text></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="26" cy="26" r="20" fill="none" stroke="#000" stroke-width="1"/><line x1="40" y1="40" x2="58" y2="58" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "notiz",
|
||||
name: "Notiz / Hinweis",
|
||||
filename: "notiz_hinweis.svg",
|
||||
tags: ["notiz", "hinweis", "anmerkung", "text"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M8 4 L56 4 L56 48 L40 48 L40 60 L8 60 Z" fill="#fef3c7" stroke="#f59e0b" stroke-width="2"/><path d="M40 48 L56 48 L40 60 Z" fill="#fcd34d" stroke="#f59e0b" stroke-width="2"/><line x1="14" y1="16" x2="50" y2="16" stroke="#d97706" stroke-width="2"/><line x1="14" y1="26" x2="50" y2="26" stroke="#d97706" stroke-width="2"/><line x1="14" y1="36" x2="50" y2="36" stroke="#d97706" stroke-width="2"/><line x1="14" y1="46" x2="34" y2="46" stroke="#d97706" stroke-width="2"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="4" width="48" height="56" fill="none" stroke="#000" stroke-width="1"/><line x1="14" y1="16" x2="50" y2="16" stroke="#000" stroke-width="0.5"/><line x1="14" y1="26" x2="50" y2="26" stroke="#000" stroke-width="0.5"/><line x1="14" y1="36" x2="50" y2="36" stroke="#000" stroke-width="0.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "warnung",
|
||||
name: "Warnung / Achtung",
|
||||
filename: "warnung_achtung.svg",
|
||||
tags: ["warnung", "achtung", "gefahr", "vorsicht"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="32,4 60,56 4,56" fill="#fbbf24" stroke="#f59e0b" stroke-width="2" stroke-linejoin="round"/><polygon points="32,10 54,52 10,52" fill="#fef3c7"/><text x="32" y="46" font-family="Arial" font-size="32" fill="#92400e" text-anchor="middle" font-weight="bold">!</text></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="32,4 60,56 4,56" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="46" font-family="Arial" font-size="24" fill="#000" text-anchor="middle">!</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "info",
|
||||
name: "Information",
|
||||
filename: "information.svg",
|
||||
tags: ["info", "information", "hinweis", "details"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="#3b82f6" stroke="#2563eb" stroke-width="2"/><circle cx="32" cy="16" r="4" fill="white"/><rect x="28" y="26" width="8" height="24" rx="2" fill="white"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="40" font-family="Arial" font-size="28" fill="#000" text-anchor="middle">i</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "haken",
|
||||
name: "Erledigt / OK",
|
||||
filename: "erledigt_ok.svg",
|
||||
tags: ["ok", "erledigt", "fertig", "haken", "check"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="#22c55e" stroke="#16a34a" stroke-width="2"/><polyline points="18,32 28,42 46,22" fill="none" stroke="white" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><polyline points="18,32 28,42 46,22" fill="none" stroke="#000" stroke-width="1.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "kreuz",
|
||||
name: "Fehler / Mangel",
|
||||
filename: "fehler_mangel.svg",
|
||||
tags: ["fehler", "mangel", "falsch", "kreuz"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="#dc2626" stroke="#b91c1c" stroke-width="2"/><line x1="20" y1="20" x2="44" y2="44" stroke="white" stroke-width="6" stroke-linecap="round"/><line x1="44" y1="20" x2="20" y2="44" stroke="white" stroke-width="6" stroke-linecap="round"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><line x1="20" y1="20" x2="44" y2="44" stroke="#000" stroke-width="1.5"/><line x1="44" y1="20" x2="20" y2="44" stroke="#000" stroke-width="1.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "fragezeichen",
|
||||
name: "Unklar / Prüfen",
|
||||
filename: "unklar_pruefen.svg",
|
||||
tags: ["unklar", "prüfen", "frage", "unbekannt"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="#f59e0b" stroke="#d97706" stroke-width="2"/><text x="32" y="44" font-family="Arial" font-size="36" fill="white" text-anchor="middle" font-weight="bold">?</text></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="40" font-family="Arial" font-size="28" fill="#000" text-anchor="middle">?</text></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// ========== BAUTEILE ==========
|
||||
bauteile: {
|
||||
name: "Bauteile",
|
||||
icon: "🏗️",
|
||||
items: [
|
||||
{
|
||||
id: "fenster",
|
||||
name: "Fenster",
|
||||
filename: "bauteil_fenster.svg",
|
||||
tags: ["fenster", "verglasung", "rahmen"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="4" width="48" height="56" fill="#bfdbfe" stroke="#3b82f6" stroke-width="3"/><line x1="32" y1="4" x2="32" y2="60" stroke="#3b82f6" stroke-width="3"/><line x1="8" y1="32" x2="56" y2="32" stroke="#3b82f6" stroke-width="3"/><rect x="12" y="8" width="16" height="20" fill="#dbeafe"/><rect x="36" y="8" width="16" height="20" fill="#dbeafe"/><rect x="12" y="36" width="16" height="20" fill="#dbeafe"/><rect x="36" y="36" width="16" height="20" fill="#dbeafe"/><circle cx="28" cy="32" r="2" fill="#1e40af"/><circle cx="36" cy="32" r="2" fill="#1e40af"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="4" width="48" height="56" fill="none" stroke="#000" stroke-width="1"/><line x1="32" y1="4" x2="32" y2="60" stroke="#000" stroke-width="1"/><line x1="8" y1="32" x2="56" y2="32" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "tuer",
|
||||
name: "Tür",
|
||||
filename: "bauteil_tuer.svg",
|
||||
tags: ["tür", "türblatt", "eingang"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="12" y="4" width="40" height="56" fill="#92400e" stroke="#78350f" stroke-width="3"/><rect x="16" y="8" width="14" height="20" fill="#a16207" rx="1"/><rect x="34" y="8" width="14" height="20" fill="#a16207" rx="1"/><rect x="16" y="32" width="14" height="20" fill="#a16207" rx="1"/><rect x="34" y="32" width="14" height="20" fill="#a16207" rx="1"/><circle cx="44" cy="34" r="3" fill="#fbbf24" stroke="#92400e" stroke-width="1"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="1"/><path d="M4 32 A28 28 0 0 1 32 4" fill="none" stroke="#000" stroke-width="0.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "wand",
|
||||
name: "Wand (Mauerwerk)",
|
||||
filename: "bauteil_wand.svg",
|
||||
tags: ["wand", "mauer", "mauerwerk", "ziegel"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="#fca5a5" stroke="#dc2626" stroke-width="2"/><g stroke="#b91c1c" stroke-width="1"><line x1="4" y1="12" x2="60" y2="12"/><line x1="4" y1="20" x2="60" y2="20"/><line x1="4" y1="28" x2="60" y2="28"/><line x1="4" y1="36" x2="60" y2="36"/><line x1="4" y1="44" x2="60" y2="44"/><line x1="4" y1="52" x2="60" y2="52"/><line x1="18" y1="4" x2="18" y2="12"/><line x1="40" y1="4" x2="40" y2="12"/><line x1="8" y1="12" x2="8" y2="20"/><line x1="30" y1="12" x2="30" y2="20"/><line x1="52" y1="12" x2="52" y2="20"/><line x1="18" y1="20" x2="18" y2="28"/><line x1="40" y1="20" x2="40" y2="28"/><line x1="8" y1="28" x2="8" y2="36"/><line x1="30" y1="28" x2="30" y2="36"/><line x1="52" y1="28" x2="52" y2="36"/><line x1="18" y1="36" x2="18" y2="44"/><line x1="40" y1="36" x2="40" y2="44"/><line x1="8" y1="44" x2="8" y2="52"/><line x1="30" y1="44" x2="30" y2="52"/><line x1="52" y1="44" x2="52" y2="52"/><line x1="18" y1="52" x2="18" y2="60"/><line x1="40" y1="52" x2="40" y2="60"/></g></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="24" width="56" height="16" fill="none" stroke="#000" stroke-width="1"/><line x1="4" y1="24" x2="60" y2="40" stroke="#000" stroke-width="0.5"/><line x1="60" y1="24" x2="4" y2="40" stroke="#000" stroke-width="0.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "wand_beton",
|
||||
name: "Wand (Beton)",
|
||||
filename: "bauteil_wand_beton.svg",
|
||||
tags: ["wand", "beton", "stahlbeton", "massiv"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="#9ca3af" stroke="#6b7280" stroke-width="2"/><circle cx="12" cy="14" r="2" fill="#6b7280" opacity="0.5"/><circle cx="28" cy="8" r="1.5" fill="#6b7280" opacity="0.4"/><circle cx="48" cy="18" r="2.5" fill="#6b7280" opacity="0.5"/><circle cx="8" cy="36" r="1.5" fill="#6b7280" opacity="0.4"/><circle cx="38" cy="28" r="2" fill="#6b7280" opacity="0.5"/><circle cx="54" cy="42" r="1.5" fill="#6b7280" opacity="0.4"/><circle cx="18" cy="48" r="2" fill="#6b7280" opacity="0.5"/><circle cx="44" cy="52" r="1.5" fill="#6b7280" opacity="0.4"/><circle cx="32" cy="44" r="2.5" fill="#6b7280" opacity="0.5"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="24" width="56" height="16" fill="none" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "boden_fliesen",
|
||||
name: "Fliesen",
|
||||
filename: "bauteil_fliesen.svg",
|
||||
tags: ["fliesen", "boden", "wand", "keramik", "kacheln"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="#e7e5e4" stroke="#78716c" stroke-width="2"/><g stroke="#a8a29e" stroke-width="2"><line x1="4" y1="18" x2="60" y2="18"/><line x1="4" y1="32" x2="60" y2="32"/><line x1="4" y1="46" x2="60" y2="46"/><line x1="18" y1="4" x2="18" y2="60"/><line x1="32" y1="4" x2="32" y2="60"/><line x1="46" y1="4" x2="46" y2="60"/></g><rect x="6" y="6" width="10" height="10" fill="#f5f5f4"/><rect x="34" y="20" width="10" height="10" fill="#f5f5f4"/><rect x="20" y="34" width="10" height="10" fill="#f5f5f4"/><rect x="48" y="48" width="10" height="10" fill="#f5f5f4"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="none" stroke="#000" stroke-width="1"/><line x1="4" y1="18" x2="60" y2="18" stroke="#000" stroke-width="0.5"/><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="0.5"/><line x1="4" y1="46" x2="60" y2="46" stroke="#000" stroke-width="0.5"/><line x1="18" y1="4" x2="18" y2="60" stroke="#000" stroke-width="0.5"/><line x1="32" y1="4" x2="32" y2="60" stroke="#000" stroke-width="0.5"/><line x1="46" y1="4" x2="46" y2="60" stroke="#000" stroke-width="0.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "boden_parkett",
|
||||
name: "Parkett / Holzboden",
|
||||
filename: "bauteil_parkett.svg",
|
||||
tags: ["parkett", "holz", "boden", "laminat", "dielen"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="#d4a574" stroke="#92400e" stroke-width="2"/><g stroke="#b8860b" stroke-width="1"><rect x="4" y="4" width="14" height="28" fill="#deb887"/><rect x="18" y="4" width="14" height="28" fill="#d4a574"/><rect x="32" y="4" width="14" height="28" fill="#c9a066"/><rect x="46" y="4" width="14" height="28" fill="#deb887"/><rect x="4" y="32" width="14" height="28" fill="#c9a066"/><rect x="18" y="32" width="14" height="28" fill="#deb887"/><rect x="32" y="32" width="14" height="28" fill="#d4a574"/><rect x="46" y="32" width="14" height="28" fill="#c9a066"/></g></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="none" stroke="#000" stroke-width="1"/><line x1="18" y1="4" x2="18" y2="60" stroke="#000" stroke-width="0.5"/><line x1="32" y1="4" x2="32" y2="60" stroke="#000" stroke-width="0.5"/><line x1="46" y1="4" x2="46" y2="60" stroke="#000" stroke-width="0.5"/><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="0.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "dach",
|
||||
name: "Dach",
|
||||
filename: "bauteil_dach.svg",
|
||||
tags: ["dach", "dachstuhl", "ziegel", "bedachung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="32,4 4,40 60,40" fill="#991b1b" stroke="#7f1d1d" stroke-width="2"/><polygon points="32,10 10,38 54,38" fill="#b91c1c"/><g stroke="#7f1d1d" stroke-width="1"><line x1="12" y1="36" x2="52" y2="36"/><line x1="16" y1="32" x2="48" y2="32"/><line x1="20" y1="28" x2="44" y2="28"/><line x1="24" y1="24" x2="40" y2="24"/><line x1="28" y1="20" x2="36" y2="20"/></g><rect x="4" y="40" width="56" height="8" fill="#78716c" stroke="#57534e" stroke-width="1"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="32,4 4,40 60,40" fill="none" stroke="#000" stroke-width="1"/><line x1="4" y1="40" x2="60" y2="40" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "treppe",
|
||||
name: "Treppe",
|
||||
filename: "bauteil_treppe.svg",
|
||||
tags: ["treppe", "stufen", "aufgang", "treppenhaus"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="#d6d3d1" stroke="#78716c" stroke-width="2"><rect x="4" y="52" width="56" height="8"/><rect x="4" y="44" width="48" height="8"/><rect x="4" y="36" width="40" height="8"/><rect x="4" y="28" width="32" height="8"/><rect x="4" y="20" width="24" height="8"/><rect x="4" y="12" width="16" height="8"/><rect x="4" y="4" width="8" height="8"/></g><path d="M8 8 L8 56 L58 56" stroke="#57534e" stroke-width="3" fill="none"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M4 60 L4 52 L12 52 L12 44 L20 44 L20 36 L28 36 L28 28 L36 28 L36 20 L44 20 L44 12 L52 12 L52 4 L60 4" fill="none" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "daemmung",
|
||||
name: "Dämmung / Isolierung",
|
||||
filename: "bauteil_daemmung.svg",
|
||||
tags: ["dämmung", "isolierung", "wärme", "kälte"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="#fef08a" stroke="#eab308" stroke-width="2"/><g stroke="#ca8a04" stroke-width="1"><path d="M4 14 Q16 10 28 14 Q40 18 52 14 L60 14"/><path d="M4 24 Q14 28 26 24 Q38 20 50 24 L60 24"/><path d="M4 34 Q16 30 28 34 Q40 38 52 34 L60 34"/><path d="M4 44 Q14 48 26 44 Q38 40 50 44 L60 44"/><path d="M4 54 Q16 50 28 54 Q40 58 52 54 L60 54"/></g><circle cx="12" cy="20" r="2" fill="#facc15"/><circle cx="32" cy="30" r="2" fill="#facc15"/><circle cx="50" cy="40" r="2" fill="#facc15"/><circle cx="20" cy="50" r="2" fill="#facc15"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="24" width="56" height="16" fill="none" stroke="#000" stroke-width="1"/><line x1="4" y1="28" x2="60" y2="28" stroke="#000" stroke-width="0.5"/><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="0.5"/><line x1="4" y1="36" x2="60" y2="36" stroke="#000" stroke-width="0.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "rohr",
|
||||
name: "Rohrleitung",
|
||||
filename: "bauteil_rohr.svg",
|
||||
tags: ["rohr", "leitung", "rohrleitung", "installation"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="26" width="56" height="12" fill="#6b7280" stroke="#4b5563" stroke-width="2"/><ellipse cx="4" cy="32" rx="3" ry="8" fill="#9ca3af" stroke="#4b5563" stroke-width="1"/><ellipse cx="60" cy="32" rx="3" ry="8" fill="#9ca3af" stroke="#4b5563" stroke-width="1"/><line x1="14" y1="26" x2="14" y2="38" stroke="#4b5563" stroke-width="1"/><line x1="32" y1="26" x2="32" y2="38" stroke="#4b5563" stroke-width="1"/><line x1="50" y1="26" x2="50" y2="38" stroke="#4b5563" stroke-width="1"/><rect x="20" y="22" width="8" height="20" rx="1" fill="#ef4444" stroke="#dc2626" stroke-width="1"/><polygon points="24,18 20,22 28,22" fill="#ef4444"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="28" x2="60" y2="28" stroke="#000" stroke-width="1"/><line x1="4" y1="36" x2="60" y2="36" stroke="#000" stroke-width="1"/><circle cx="4" cy="32" r="4" fill="none" stroke="#000" stroke-width="1"/><circle cx="60" cy="32" r="4" fill="none" stroke="#000" stroke-width="1"/></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// ========== MÖBEL ==========
|
||||
moebel: {
|
||||
name: "Möbel",
|
||||
icon: "🛋️",
|
||||
items: [
|
||||
{
|
||||
id: "sofa",
|
||||
name: "Sofa / Couch",
|
||||
filename: "moebel_sofa.svg",
|
||||
tags: ["sofa", "couch", "sitzmoebel", "wohnzimmer"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="24" width="56" height="28" rx="4" fill="#78716c" stroke="#57534e" stroke-width="2"/><rect x="8" y="20" width="48" height="20" rx="3" fill="#a8a29e" stroke="#78716c" stroke-width="1"/><rect x="4" y="28" width="10" height="20" rx="2" fill="#78716c" stroke="#57534e" stroke-width="1"/><rect x="50" y="28" width="10" height="20" rx="2" fill="#78716c" stroke="#57534e" stroke-width="1"/><rect x="6" y="52" width="6" height="6" rx="1" fill="#57534e"/><rect x="52" y="52" width="6" height="6" rx="1" fill="#57534e"/><line x1="22" y1="24" x2="22" y2="40" stroke="#57534e" stroke-width="1" opacity="0.5"/><line x1="42" y1="24" x2="42" y2="40" stroke="#57534e" stroke-width="1" opacity="0.5"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="12" width="56" height="40" fill="none" stroke="#000" stroke-width="1"/><rect x="4" y="12" width="8" height="40" fill="none" stroke="#000" stroke-width="1"/><rect x="52" y="12" width="8" height="40" fill="none" stroke="#000" stroke-width="1"/><line x1="22" y1="12" x2="22" y2="52" stroke="#000" stroke-width="0.5"/><line x1="42" y1="12" x2="42" y2="52" stroke="#000" stroke-width="0.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "tisch",
|
||||
name: "Tisch",
|
||||
filename: "moebel_tisch.svg",
|
||||
tags: ["tisch", "esstisch", "schreibtisch", "möbel"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="6" y="20" width="52" height="6" rx="1" fill="#92400e" stroke="#78350f" stroke-width="2"/><rect x="10" y="26" width="4" height="30" fill="#a16207"/><rect x="50" y="26" width="4" height="30" fill="#a16207"/><rect x="8" y="54" width="8" height="4" rx="1" fill="#78350f"/><rect x="48" y="54" width="8" height="4" rx="1" fill="#78350f"/><line x1="14" y1="40" x2="50" y2="40" stroke="#a16207" stroke-width="2"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="6" y="8" width="52" height="48" fill="none" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "stuhl",
|
||||
name: "Stuhl",
|
||||
filename: "moebel_stuhl.svg",
|
||||
tags: ["stuhl", "sitz", "möbel", "esszimmer"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="14" y="4" width="36" height="32" rx="2" fill="#a16207" stroke="#92400e" stroke-width="2"/><rect x="18" y="8" width="28" height="24" rx="1" fill="#ca8a04"/><rect x="14" y="36" width="36" height="6" rx="1" fill="#92400e" stroke="#78350f" stroke-width="1"/><rect x="16" y="42" width="4" height="18" fill="#78350f"/><rect x="44" y="42" width="4" height="18" fill="#78350f"/><rect x="14" y="58" width="8" height="3" rx="1" fill="#57534e"/><rect x="42" y="58" width="8" height="3" rx="1" fill="#57534e"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="14" y="20" width="36" height="36" fill="none" stroke="#000" stroke-width="1"/><rect x="14" y="12" width="36" height="8" fill="none" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "schrank",
|
||||
name: "Schrank",
|
||||
filename: "moebel_schrank.svg",
|
||||
tags: ["schrank", "kleiderschrank", "möbel", "stauraum"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="6" y="4" width="52" height="54" rx="2" fill="#a16207" stroke="#92400e" stroke-width="2"/><line x1="32" y1="4" x2="32" y2="58" stroke="#92400e" stroke-width="2"/><rect x="10" y="8" width="18" height="46" fill="#ca8a04" rx="1"/><rect x="36" y="8" width="18" height="46" fill="#ca8a04" rx="1"/><circle cx="26" cy="32" r="2" fill="#78350f"/><circle cx="38" cy="32" r="2" fill="#78350f"/><rect x="8" y="58" width="6" height="4" fill="#78350f"/><rect x="50" y="58" width="6" height="4" fill="#78350f"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="6" y="8" width="52" height="48" fill="none" stroke="#000" stroke-width="1"/><line x1="32" y1="8" x2="32" y2="56" stroke="#000" stroke-width="0.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "bett",
|
||||
name: "Bett",
|
||||
filename: "moebel_bett.svg",
|
||||
tags: ["bett", "schlafzimmer", "möbel", "schlafen"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="20" width="56" height="32" rx="2" fill="#78716c" stroke="#57534e" stroke-width="2"/><rect x="8" y="16" width="14" height="12" rx="2" fill="#a8a29e" stroke="#78716c" stroke-width="1"/><rect x="42" y="16" width="14" height="12" rx="2" fill="#a8a29e" stroke="#78716c" stroke-width="1"/><rect x="8" y="24" width="48" height="24" fill="#e7e5e4" stroke="#d6d3d1" stroke-width="1"/><rect x="4" y="52" width="8" height="8" rx="1" fill="#57534e"/><rect x="52" y="52" width="8" height="8" rx="1" fill="#57534e"/><path d="M12 28 Q32 20 52 28" stroke="#d6d3d1" stroke-width="1" fill="none"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="none" stroke="#000" stroke-width="1"/><rect x="8" y="4" width="20" height="12" fill="none" stroke="#000" stroke-width="0.5"/><rect x="36" y="4" width="20" height="12" fill="none" stroke="#000" stroke-width="0.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "regal",
|
||||
name: "Regal",
|
||||
filename: "moebel_regal.svg",
|
||||
tags: ["regal", "bücherregal", "möbel", "stauraum"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="4" width="48" height="56" fill="none" stroke="#92400e" stroke-width="3"/><line x1="8" y1="18" x2="56" y2="18" stroke="#92400e" stroke-width="2"/><line x1="8" y1="32" x2="56" y2="32" stroke="#92400e" stroke-width="2"/><line x1="8" y1="46" x2="56" y2="46" stroke="#92400e" stroke-width="2"/><rect x="12" y="8" width="6" height="8" fill="#3b82f6" rx="1"/><rect x="20" y="6" width="5" height="10" fill="#22c55e" rx="1"/><rect x="28" y="8" width="8" height="8" fill="#f59e0b" rx="1"/><rect x="14" y="22" width="10" height="8" fill="#a8a29e" rx="1"/><rect x="30" y="20" width="6" height="10" fill="#ef4444" rx="1"/><rect x="44" y="22" width="8" height="8" fill="#8b5cf6" rx="1"/><rect x="12" y="36" width="12" height="8" fill="#06b6d4" rx="1"/><rect x="40" y="34" width="10" height="10" fill="#ec4899" rx="1"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="8" width="48" height="12" fill="none" stroke="#000" stroke-width="1"/></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// ========== BAD / SANITÄR ==========
|
||||
bad: {
|
||||
name: "Bad & Sanitär",
|
||||
icon: "🚿",
|
||||
items: [
|
||||
{
|
||||
id: "wc",
|
||||
name: "WC / Toilette",
|
||||
filename: "wc_draufsicht.svg",
|
||||
tags: ["wc", "toilette", "klo", "bad", "sanitär"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="38" rx="14" ry="18" fill="#f5f5f5" stroke="#333" stroke-width="2"/><ellipse cx="32" cy="38" rx="8" ry="12" fill="#e0f2fe" stroke="#333" stroke-width="1.5"/><rect x="22" y="8" width="20" height="16" rx="3" fill="#f5f5f5" stroke="#333" stroke-width="2"/><rect x="26" y="10" width="12" height="6" rx="1" fill="#ddd" stroke="#333" stroke-width="1"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="38" rx="14" ry="18" fill="none" stroke="#000" stroke-width="1"/><ellipse cx="32" cy="38" rx="8" ry="12" fill="none" stroke="#000" stroke-width="1"/><rect x="22" y="8" width="20" height="16" rx="0" fill="none" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "waschbecken",
|
||||
name: "Waschbecken",
|
||||
filename: "waschbecken_draufsicht.svg",
|
||||
tags: ["waschbecken", "waschtisch", "bad", "sanitär", "lavabo"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="16" width="48" height="40" rx="4" fill="#f5f5f5" stroke="#333" stroke-width="2"/><ellipse cx="32" cy="36" rx="16" ry="12" fill="#e0f2fe" stroke="#333" stroke-width="1.5"/><circle cx="32" cy="40" r="3" fill="#333"/><rect x="30" y="18" width="4" height="8" rx="1" fill="#999" stroke="#333" stroke-width="1"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="16" width="48" height="40" fill="none" stroke="#000" stroke-width="1"/><ellipse cx="32" cy="36" rx="16" ry="12" fill="none" stroke="#000" stroke-width="1"/><circle cx="32" cy="40" r="3" fill="none" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "badewanne",
|
||||
name: "Badewanne",
|
||||
filename: "badewanne_draufsicht.svg",
|
||||
tags: ["badewanne", "wanne", "bad", "sanitär", "baden"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="8" width="56" height="48" rx="8" fill="#f5f5f5" stroke="#333" stroke-width="2"/><rect x="8" y="12" width="48" height="40" rx="6" fill="#e0f2fe" stroke="#333" stroke-width="1.5"/><circle cx="50" cy="18" r="3" fill="#999" stroke="#333" stroke-width="1"/><ellipse cx="50" cy="46" rx="4" ry="3" fill="#999" stroke="#333" stroke-width="1"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="8" width="56" height="48" rx="0" fill="none" stroke="#000" stroke-width="1"/><rect x="8" y="12" width="48" height="40" rx="0" fill="none" stroke="#000" stroke-width="1"/><circle cx="50" cy="18" r="3" fill="none" stroke="#000" stroke-width="1"/><ellipse cx="50" cy="46" rx="4" ry="3" fill="none" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "dusche",
|
||||
name: "Dusche",
|
||||
filename: "dusche_draufsicht.svg",
|
||||
tags: ["dusche", "duschwanne", "bad", "sanitär", "brause"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" rx="2" fill="#f5f5f5" stroke="#333" stroke-width="2"/><rect x="8" y="8" width="48" height="48" rx="1" fill="#e0f2fe" stroke="#333" stroke-width="1"/><circle cx="52" cy="12" r="4" fill="#999" stroke="#333" stroke-width="1"/><line x1="8" y1="8" x2="56" y2="56" stroke="#333" stroke-width="1" stroke-dasharray="4,2"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="none" stroke="#000" stroke-width="1"/><circle cx="52" cy="12" r="4" fill="none" stroke="#000" stroke-width="1"/><line x1="4" y1="4" x2="60" y2="60" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "bidet",
|
||||
name: "Bidet",
|
||||
filename: "bidet_draufsicht.svg",
|
||||
tags: ["bidet", "bad", "sanitär"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="32" rx="14" ry="20" fill="#f5f5f5" stroke="#333" stroke-width="2"/><ellipse cx="32" cy="32" rx="8" ry="14" fill="#e0f2fe" stroke="#333" stroke-width="1.5"/><circle cx="32" cy="18" r="2" fill="#999" stroke="#333" stroke-width="1"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="32" rx="14" ry="20" fill="none" stroke="#000" stroke-width="1"/><ellipse cx="32" cy="32" rx="8" ry="14" fill="none" stroke="#000" stroke-width="1"/><circle cx="32" cy="18" r="2" fill="none" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "doppelwaschbecken",
|
||||
name: "Doppelwaschbecken",
|
||||
filename: "doppelwaschbecken_draufsicht.svg",
|
||||
tags: ["doppelwaschbecken", "waschtisch", "bad", "sanitär", "doppel"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="2" y="16" width="60" height="32" rx="2" fill="#f5f5f5" stroke="#333" stroke-width="2"/><ellipse cx="18" cy="32" rx="10" ry="8" fill="#e0f2fe" stroke="#333" stroke-width="1"/><ellipse cx="46" cy="32" rx="10" ry="8" fill="#e0f2fe" stroke="#333" stroke-width="1"/><circle cx="18" cy="34" r="2" fill="#333"/><circle cx="46" cy="34" r="2" fill="#333"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="2" y="16" width="60" height="32" fill="none" stroke="#000" stroke-width="1"/><ellipse cx="18" cy="32" rx="10" ry="8" fill="none" stroke="#000" stroke-width="1"/><ellipse cx="46" cy="32" rx="10" ry="8" fill="none" stroke="#000" stroke-width="1"/><circle cx="18" cy="34" r="2" fill="none" stroke="#000" stroke-width="1"/><circle cx="46" cy="34" r="2" fill="none" stroke="#000" stroke-width="1"/></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
// ========== KÜCHE ==========
|
||||
kueche: {
|
||||
name: "Küche",
|
||||
icon: "🍳",
|
||||
items: [
|
||||
{
|
||||
id: "herd",
|
||||
name: "Herd / Kochfeld",
|
||||
filename: "kueche_herd.svg",
|
||||
tags: ["herd", "kochfeld", "küche", "kochen"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" rx="3" fill="#1f2937" stroke="#111827" stroke-width="2"/><rect x="8" y="8" width="48" height="48" fill="#374151" rx="2"/><circle cx="22" cy="22" r="8" fill="#111827" stroke="#4b5563" stroke-width="2"/><circle cx="42" cy="22" r="8" fill="#111827" stroke="#4b5563" stroke-width="2"/><circle cx="22" cy="42" r="8" fill="#111827" stroke="#4b5563" stroke-width="2"/><circle cx="42" cy="42" r="8" fill="#111827" stroke="#4b5563" stroke-width="2"/><circle cx="22" cy="22" r="4" fill="#dc2626" opacity="0.8"/><circle cx="42" cy="22" r="4" fill="#dc2626" opacity="0.8"/><circle cx="22" cy="42" r="4" fill="#dc2626" opacity="0.4"/><circle cx="42" cy="42" r="4" fill="#dc2626" opacity="0.4"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="none" stroke="#000" stroke-width="1"/><circle cx="22" cy="22" r="8" fill="none" stroke="#000" stroke-width="1"/><circle cx="42" cy="22" r="8" fill="none" stroke="#000" stroke-width="1"/><circle cx="22" cy="42" r="8" fill="none" stroke="#000" stroke-width="1"/><circle cx="42" cy="42" r="8" fill="none" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "spuele",
|
||||
name: "Spüle",
|
||||
filename: "kueche_spuele.svg",
|
||||
tags: ["spüle", "waschbecken", "küche", "abwasch"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="8" width="56" height="48" rx="3" fill="#9ca3af" stroke="#6b7280" stroke-width="2"/><rect x="8" y="12" width="24" height="32" rx="4" fill="#4b5563" stroke="#374151" stroke-width="2"/><rect x="36" y="12" width="20" height="32" rx="4" fill="#4b5563" stroke="#374151" stroke-width="2"/><circle cx="20" cy="28" r="3" fill="#1f2937"/><ellipse cx="46" cy="28" rx="6" ry="8" fill="#374151"/><circle cx="50" cy="6" r="4" fill="#6b7280" stroke="#4b5563" stroke-width="1"/><rect x="48" y="6" width="4" height="8" fill="#6b7280"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="8" width="56" height="48" fill="none" stroke="#000" stroke-width="1"/><rect x="8" y="12" width="24" height="32" fill="none" stroke="#000" stroke-width="1"/><rect x="36" y="12" width="20" height="32" fill="none" stroke="#000" stroke-width="1"/><circle cx="20" cy="28" r="2" fill="none" stroke="#000" stroke-width="0.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "kuehlschrank",
|
||||
name: "Kühlschrank",
|
||||
filename: "kueche_kuehlschrank.svg",
|
||||
tags: ["kühlschrank", "kühlen", "küche", "elektrogerät"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="10" y="4" width="44" height="56" rx="3" fill="#e5e7eb" stroke="#9ca3af" stroke-width="2"/><line x1="10" y1="24" x2="54" y2="24" stroke="#9ca3af" stroke-width="2"/><rect x="46" y="10" width="4" height="8" rx="1" fill="#6b7280"/><rect x="46" y="30" width="4" height="12" rx="1" fill="#6b7280"/><rect x="16" y="8" width="8" height="4" fill="#bfdbfe" rx="1"/><rect x="28" y="8" width="12" height="4" fill="#bfdbfe" rx="1"/><circle cx="20" cy="16" r="3" fill="#fbbf24"/><rect x="16" y="30" width="12" height="8" fill="#bbf7d0" rx="1"/><rect x="16" y="42" width="8" height="10" fill="#fecaca" rx="1"/><rect x="28" y="38" width="14" height="6" fill="#e0f2fe" rx="1"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="10" y="4" width="44" height="56" fill="none" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "backofen",
|
||||
name: "Backofen",
|
||||
filename: "kueche_backofen.svg",
|
||||
tags: ["backofen", "ofen", "küche", "backen"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="6" y="4" width="52" height="56" rx="3" fill="#1f2937" stroke="#111827" stroke-width="2"/><rect x="10" y="18" width="44" height="38" rx="2" fill="#111827" stroke="#374151" stroke-width="2"/><rect x="14" y="22" width="36" height="30" fill="#292524" stroke="#4b5563" stroke-width="1"/><line x1="14" y1="32" x2="50" y2="32" stroke="#4b5563" stroke-width="1"/><line x1="14" y1="42" x2="50" y2="42" stroke="#4b5563" stroke-width="1"/><circle cx="16" cy="10" r="3" fill="#4b5563"/><circle cx="28" cy="10" r="3" fill="#4b5563"/><circle cx="40" cy="10" r="3" fill="#4b5563"/><rect x="46" y="8" width="8" height="4" rx="1" fill="#22c55e"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="6" y="4" width="52" height="56" fill="none" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "spuelmaschine",
|
||||
name: "Spülmaschine",
|
||||
filename: "kueche_spuelmaschine.svg",
|
||||
tags: ["spülmaschine", "geschirrspüler", "küche", "elektrogerät"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="6" y="4" width="52" height="56" rx="3" fill="#e5e7eb" stroke="#9ca3af" stroke-width="2"/><rect x="10" y="16" width="44" height="40" rx="2" fill="#d1d5db" stroke="#9ca3af" stroke-width="1"/><rect x="10" y="8" width="44" height="6" fill="#9ca3af" rx="1"/><circle cx="16" cy="11" r="2" fill="#4b5563"/><rect x="22" y="9" width="12" height="4" rx="1" fill="#1f2937"/><circle cx="48" cy="11" r="2" fill="#22c55e"/><ellipse cx="32" cy="36" rx="16" ry="14" fill="#93c5fd" stroke="#3b82f6" stroke-width="2"/><line x1="32" y1="24" x2="32" y2="48" stroke="#3b82f6" stroke-width="1" stroke-dasharray="2,2"/><line x1="18" y1="36" x2="46" y2="36" stroke="#3b82f6" stroke-width="1" stroke-dasharray="2,2"/></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="6" y="4" width="52" height="56" fill="none" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "dunstabzug",
|
||||
name: "Dunstabzugshaube",
|
||||
filename: "kueche_dunstabzug.svg",
|
||||
tags: ["dunstabzug", "dunstabzugshaube", "küche", "abzug"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="8,32 56,32 52,56 12,56" fill="#9ca3af" stroke="#6b7280" stroke-width="2"/><rect x="20" y="4" width="24" height="28" fill="#78716c" stroke="#57534e" stroke-width="2"/><rect x="24" y="8" width="16" height="8" fill="#57534e" rx="1"/><rect x="14" y="36" width="36" height="4" fill="#6b7280"/><rect x="14" y="44" width="36" height="4" fill="#6b7280"/><circle cx="32" cy="52" r="2" fill="#4b5563"/><g stroke="#d1d5db" stroke-width="1" opacity="0.5"><path d="M20 20 Q24 16 28 20" fill="none"/><path d="M36 20 Q40 16 44 20" fill="none"/></g></svg>`,
|
||||
dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="8" width="48" height="48" fill="none" stroke="#000" stroke-width="1"/></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// ========== PFEILE (dynamisch) ==========
|
||||
pfeile: {
|
||||
name: "Richtungspfeile (Rot)",
|
||||
icon: "➡️",
|
||||
items: []
|
||||
},
|
||||
|
||||
// ========== KOMPASS (dynamisch) ==========
|
||||
kompass: {
|
||||
name: "Nordpfeile / Kompass",
|
||||
icon: "🧭",
|
||||
items: []
|
||||
},
|
||||
|
||||
// ========== VERMESSUNG - STATUS ==========
|
||||
vermessung_status: {
|
||||
name: "Vermessung - Status",
|
||||
icon: "📋",
|
||||
items: [
|
||||
{
|
||||
id: "vm_reparatur",
|
||||
name: "Reparatur",
|
||||
filename: "vermessung_reparatur.svg",
|
||||
tags: ["reparatur", "instandsetzung", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="16" font-weight="bold" fill="#000" text-anchor="middle">R</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_neu",
|
||||
name: "Neu",
|
||||
filename: "vermessung_neu.svg",
|
||||
tags: ["neu", "neubau", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="16" font-weight="bold" fill="#000" text-anchor="middle">N</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_bestand",
|
||||
name: "Bestand",
|
||||
filename: "vermessung_bestand.svg",
|
||||
tags: ["bestand", "bestehend", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="16" font-weight="bold" fill="#000" text-anchor="middle">B</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_abriss",
|
||||
name: "Abriss",
|
||||
filename: "vermessung_abriss.svg",
|
||||
tags: ["abriss", "rückbau", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="none" stroke="#000" stroke-width="2"/><line x1="12" y1="12" x2="52" y2="52" stroke="#000" stroke-width="2"/><line x1="52" y1="12" x2="12" y2="52" stroke="#000" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_geplant",
|
||||
name: "Geplant",
|
||||
filename: "vermessung_geplant.svg",
|
||||
tags: ["geplant", "planung", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="none" stroke="#000" stroke-width="2" stroke-dasharray="6,4"/><text x="32" y="38" font-family="Arial" font-size="16" font-weight="bold" fill="#000" text-anchor="middle">P</text></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// ========== VERMESSUNG - GRENZEN ==========
|
||||
vermessung_grenzen: {
|
||||
name: "Vermessung - Grenzen",
|
||||
icon: "📍",
|
||||
items: [
|
||||
{
|
||||
id: "vm_grundstuecksgrenze",
|
||||
name: "Grundstücksgrenze",
|
||||
filename: "vermessung_grundstuecksgrenze.svg",
|
||||
tags: ["grundstück", "grenze", "flurstück", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="3"/><line x1="12" y1="26" x2="12" y2="38" stroke="#000" stroke-width="2"/><line x1="52" y1="26" x2="52" y2="38" stroke="#000" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_grenzpunkt_vermarkt",
|
||||
name: "Grenzpunkt (vermarkt)",
|
||||
filename: "vermessung_grenzpunkt_vermarkt.svg",
|
||||
tags: ["grenzpunkt", "grenzstein", "vermarkt", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="12" fill="#000"/><circle cx="32" cy="32" r="6" fill="#fff"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_grenzpunkt_unvermarkt",
|
||||
name: "Grenzpunkt (unvermarkt)",
|
||||
filename: "vermessung_grenzpunkt_unvermarkt.svg",
|
||||
tags: ["grenzpunkt", "unvermarkt", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="10" fill="none" stroke="#000" stroke-width="2"/><line x1="32" y1="22" x2="32" y2="42" stroke="#000" stroke-width="2"/><line x1="22" y1="32" x2="42" y2="32" stroke="#000" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_flurstucksgrenze",
|
||||
name: "Flurstücksgrenze",
|
||||
filename: "vermessung_flurstucksgrenze.svg",
|
||||
tags: ["flurstück", "grenze", "kataster", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="2" stroke-dasharray="12,4"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_zaun",
|
||||
name: "Zaun",
|
||||
filename: "vermessung_zaun.svg",
|
||||
tags: ["zaun", "einfriedung", "grenze", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="1.5"/><line x1="12" y1="24" x2="12" y2="40" stroke="#000" stroke-width="1.5"/><line x1="24" y1="24" x2="24" y2="40" stroke="#000" stroke-width="1.5"/><line x1="36" y1="24" x2="36" y2="40" stroke="#000" stroke-width="1.5"/><line x1="48" y1="24" x2="48" y2="40" stroke="#000" stroke-width="1.5"/><line x1="12" y1="28" x2="24" y2="28" stroke="#000" stroke-width="1"/><line x1="24" y1="28" x2="36" y2="28" stroke="#000" stroke-width="1"/><line x1="36" y1="28" x2="48" y2="28" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_mauer",
|
||||
name: "Mauer",
|
||||
filename: "vermessung_mauer.svg",
|
||||
tags: ["mauer", "wand", "einfriedung", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="26" width="56" height="12" fill="none" stroke="#000" stroke-width="2"/><line x1="16" y1="26" x2="16" y2="38" stroke="#000" stroke-width="1"/><line x1="28" y1="26" x2="28" y2="38" stroke="#000" stroke-width="1"/><line x1="40" y1="26" x2="40" y2="38" stroke="#000" stroke-width="1"/><line x1="52" y1="26" x2="52" y2="38" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_hecke",
|
||||
name: "Hecke",
|
||||
filename: "vermessung_hecke.svg",
|
||||
tags: ["hecke", "grün", "bepflanzung", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="38" x2="60" y2="38" stroke="#000" stroke-width="1.5"/><circle cx="12" cy="32" r="6" fill="none" stroke="#000" stroke-width="1.5"/><circle cx="24" cy="30" r="7" fill="none" stroke="#000" stroke-width="1.5"/><circle cx="38" cy="31" r="6" fill="none" stroke="#000" stroke-width="1.5"/><circle cx="52" cy="32" r="6" fill="none" stroke="#000" stroke-width="1.5"/></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// ========== VERMESSUNG - WASSER ==========
|
||||
vermessung_wasser: {
|
||||
name: "Vermessung - Wasser",
|
||||
icon: "💧",
|
||||
items: [
|
||||
{
|
||||
id: "vm_hydrant_unterflur",
|
||||
name: "Hydrant (Unterflur)",
|
||||
filename: "vermessung_hydrant_unterflur.svg",
|
||||
tags: ["hydrant", "unterflur", "wasser", "feuerwehr", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="16" fill="none" stroke="#000" stroke-width="2"/><line x1="32" y1="16" x2="32" y2="48" stroke="#000" stroke-width="2"/><line x1="16" y1="32" x2="48" y2="32" stroke="#000" stroke-width="2"/><circle cx="32" cy="32" r="4" fill="#000"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_hydrant_ueberflur",
|
||||
name: "Hydrant (Überflur)",
|
||||
filename: "vermessung_hydrant_ueberflur.svg",
|
||||
tags: ["hydrant", "überflur", "wasser", "feuerwehr", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="32,8 48,24 48,56 16,56 16,24" fill="none" stroke="#000" stroke-width="2"/><line x1="16" y1="36" x2="48" y2="36" stroke="#000" stroke-width="2"/><circle cx="32" cy="46" r="4" fill="#000"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_wasserschacht",
|
||||
name: "Trinkwasserschacht",
|
||||
filename: "vermessung_wasserschacht.svg",
|
||||
tags: ["schacht", "wasser", "trinkwasser", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="16" y="16" width="32" height="32" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="14" font-weight="bold" fill="#000" text-anchor="middle">W</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_wasserschieber",
|
||||
name: "Wasserschieber",
|
||||
filename: "vermessung_wasserschieber.svg",
|
||||
tags: ["schieber", "absperrer", "wasser", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="8" y1="32" x2="56" y2="32" stroke="#000" stroke-width="2"/><line x1="32" y1="20" x2="32" y2="44" stroke="#000" stroke-width="3"/><circle cx="32" cy="32" r="6" fill="none" stroke="#000" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_brunnen",
|
||||
name: "Brunnen",
|
||||
filename: "vermessung_brunnen.svg",
|
||||
tags: ["brunnen", "wasser", "quelle", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="20" fill="none" stroke="#000" stroke-width="2"/><circle cx="32" cy="32" r="8" fill="none" stroke="#000" stroke-width="2"/><line x1="32" y1="12" x2="32" y2="4" stroke="#000" stroke-width="2"/><line x1="32" y1="52" x2="32" y2="60" stroke="#000" stroke-width="2"/><line x1="12" y1="32" x2="4" y2="32" stroke="#000" stroke-width="2"/><line x1="52" y1="32" x2="60" y2="32" stroke="#000" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_wasserleitung",
|
||||
name: "Wasserleitung",
|
||||
filename: "vermessung_wasserleitung.svg",
|
||||
tags: ["leitung", "wasser", "rohr", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="3"/><text x="32" y="24" font-family="Arial" font-size="10" fill="#000" text-anchor="middle">W</text></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// ========== VERMESSUNG - ABWASSER ==========
|
||||
vermessung_abwasser: {
|
||||
name: "Vermessung - Abwasser",
|
||||
icon: "🚰",
|
||||
items: [
|
||||
{
|
||||
id: "vm_abwasserschacht",
|
||||
name: "Abwasserschacht",
|
||||
filename: "vermessung_abwasserschacht.svg",
|
||||
tags: ["schacht", "abwasser", "kanal", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="16" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="14" font-weight="bold" fill="#000" text-anchor="middle">S</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_schacht_rund",
|
||||
name: "Schacht (rund)",
|
||||
filename: "vermessung_schacht_rund.svg",
|
||||
tags: ["schacht", "rund", "kanal", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="18" fill="none" stroke="#000" stroke-width="2"/><circle cx="32" cy="32" r="10" fill="none" stroke="#000" stroke-width="1.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_schacht_eckig",
|
||||
name: "Schacht (eckig)",
|
||||
filename: "vermessung_schacht_eckig.svg",
|
||||
tags: ["schacht", "eckig", "kanal", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="14" y="14" width="36" height="36" fill="none" stroke="#000" stroke-width="2"/><rect x="22" y="22" width="20" height="20" fill="none" stroke="#000" stroke-width="1.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_einlauf",
|
||||
name: "Einlauf / Gully",
|
||||
filename: "vermessung_einlauf.svg",
|
||||
tags: ["einlauf", "gully", "straßenablauf", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="18" y="18" width="28" height="28" fill="none" stroke="#000" stroke-width="2"/><line x1="22" y1="26" x2="42" y2="26" stroke="#000" stroke-width="1.5"/><line x1="22" y1="32" x2="42" y2="32" stroke="#000" stroke-width="1.5"/><line x1="22" y1="38" x2="42" y2="38" stroke="#000" stroke-width="1.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_abwasserleitung",
|
||||
name: "Abwasserleitung",
|
||||
filename: "vermessung_abwasserleitung.svg",
|
||||
tags: ["leitung", "abwasser", "kanal", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="2" stroke-dasharray="10,4"/></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// ========== VERMESSUNG - STROM ==========
|
||||
vermessung_strom: {
|
||||
name: "Vermessung - Strom",
|
||||
icon: "⚡",
|
||||
items: [
|
||||
{
|
||||
id: "vm_hausanschluss_elektro",
|
||||
name: "Hausanschluss Elektro",
|
||||
filename: "vermessung_hausanschluss_elektro.svg",
|
||||
tags: ["hausanschluss", "elektro", "strom", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="14" fill="none" stroke="#000" stroke-width="2"/><polygon points="32,20 26,34 30,34 28,44 38,30 34,30" fill="#000"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_laterne",
|
||||
name: "Laterne / Mast",
|
||||
filename: "vermessung_laterne.svg",
|
||||
tags: ["laterne", "mast", "beleuchtung", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="4" fill="#000"/><line x1="32" y1="8" x2="32" y2="28" stroke="#000" stroke-width="2"/><line x1="32" y1="36" x2="32" y2="56" stroke="#000" stroke-width="2"/><line x1="8" y1="32" x2="28" y2="32" stroke="#000" stroke-width="2"/><line x1="36" y1="32" x2="56" y2="32" stroke="#000" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_stromkabel",
|
||||
name: "Stromkabel",
|
||||
filename: "vermessung_stromkabel.svg",
|
||||
tags: ["kabel", "strom", "leitung", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="3"/><text x="32" y="24" font-family="Arial" font-size="10" fill="#000" text-anchor="middle">E</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_schaltkasten",
|
||||
name: "Schaltkasten",
|
||||
filename: "vermessung_schaltkasten.svg",
|
||||
tags: ["schaltkasten", "verteiler", "strom", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="16" y="12" width="32" height="40" fill="none" stroke="#000" stroke-width="2"/><line x1="16" y1="24" x2="48" y2="24" stroke="#000" stroke-width="1"/><text x="32" y="42" font-family="Arial" font-size="12" fill="#000" text-anchor="middle">E</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_trafostation",
|
||||
name: "Trafostation",
|
||||
filename: "vermessung_trafostation.svg",
|
||||
tags: ["trafo", "station", "umspanner", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="12" y="12" width="40" height="40" fill="none" stroke="#000" stroke-width="2"/><line x1="12" y1="12" x2="52" y2="52" stroke="#000" stroke-width="2"/><line x1="52" y1="12" x2="12" y2="52" stroke="#000" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_mast_holz",
|
||||
name: "Mast (Holz)",
|
||||
filename: "vermessung_mast_holz.svg",
|
||||
tags: ["mast", "holz", "freileitung", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="12" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="14" fill="#000" text-anchor="middle">H</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_mast_beton",
|
||||
name: "Mast (Beton)",
|
||||
filename: "vermessung_mast_beton.svg",
|
||||
tags: ["mast", "beton", "freileitung", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="12" fill="none" stroke="#000" stroke-width="2"/><circle cx="32" cy="32" r="6" fill="none" stroke="#000" stroke-width="1.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_mast_stahl",
|
||||
name: "Mast (Stahl)",
|
||||
filename: "vermessung_mast_stahl.svg",
|
||||
tags: ["mast", "stahl", "freileitung", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="20" y="20" width="24" height="24" fill="none" stroke="#000" stroke-width="2"/></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// ========== VERMESSUNG - GAS ==========
|
||||
vermessung_gas: {
|
||||
name: "Vermessung - Gas",
|
||||
icon: "🔥",
|
||||
items: [
|
||||
{
|
||||
id: "vm_gasschieber",
|
||||
name: "Gasschieber",
|
||||
filename: "vermessung_gasschieber.svg",
|
||||
tags: ["schieber", "absperrer", "gas", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="8" y1="32" x2="56" y2="32" stroke="#000" stroke-width="2" stroke-dasharray="8,4"/><line x1="32" y1="20" x2="32" y2="44" stroke="#000" stroke-width="3"/><text x="32" y="56" font-family="Arial" font-size="10" fill="#000" text-anchor="middle">G</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_gasleitung",
|
||||
name: "Gasleitung",
|
||||
filename: "vermessung_gasleitung.svg",
|
||||
tags: ["leitung", "gas", "rohr", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="2" stroke-dasharray="8,4"/><text x="32" y="24" font-family="Arial" font-size="10" fill="#000" text-anchor="middle">G</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_hausanschluss_gas",
|
||||
name: "Hausanschluss Gas",
|
||||
filename: "vermessung_hausanschluss_gas.svg",
|
||||
tags: ["hausanschluss", "gas", "anschluss", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="18" y="18" width="28" height="28" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="14" font-weight="bold" fill="#000" text-anchor="middle">G</text></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// ========== VERMESSUNG - VERKEHR ==========
|
||||
vermessung_verkehr: {
|
||||
name: "Vermessung - Verkehr",
|
||||
icon: "🚗",
|
||||
items: [
|
||||
{
|
||||
id: "vm_gleise",
|
||||
name: "Gleise / Schienen",
|
||||
filename: "vermessung_gleise.svg",
|
||||
tags: ["gleise", "schienen", "bahn", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="24" x2="60" y2="24" stroke="#000" stroke-width="2"/><line x1="4" y1="40" x2="60" y2="40" stroke="#000" stroke-width="2"/><line x1="12" y1="24" x2="12" y2="40" stroke="#000" stroke-width="1.5"/><line x1="24" y1="24" x2="24" y2="40" stroke="#000" stroke-width="1.5"/><line x1="36" y1="24" x2="36" y2="40" stroke="#000" stroke-width="1.5"/><line x1="48" y1="24" x2="48" y2="40" stroke="#000" stroke-width="1.5"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_prellbock",
|
||||
name: "Prellbock",
|
||||
filename: "vermessung_prellbock.svg",
|
||||
tags: ["prellbock", "gleisende", "bahn", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="40" y2="32" stroke="#000" stroke-width="2"/><line x1="40" y1="16" x2="40" y2="48" stroke="#000" stroke-width="4"/><line x1="44" y1="20" x2="56" y2="20" stroke="#000" stroke-width="2"/><line x1="44" y1="44" x2="56" y2="44" stroke="#000" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_verkehrsschild",
|
||||
name: "Verkehrsschild",
|
||||
filename: "vermessung_verkehrsschild.svg",
|
||||
tags: ["schild", "verkehr", "straße", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="32" y1="36" x2="32" y2="60" stroke="#000" stroke-width="2"/><polygon points="32,8 50,24 50,36 14,36 14,24" fill="none" stroke="#000" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_ampel",
|
||||
name: "Ampel",
|
||||
filename: "vermessung_ampel.svg",
|
||||
tags: ["ampel", "signal", "verkehr", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="22" y="8" width="20" height="40" fill="none" stroke="#000" stroke-width="2"/><circle cx="32" cy="18" r="5" fill="none" stroke="#000" stroke-width="1.5"/><circle cx="32" cy="28" r="5" fill="none" stroke="#000" stroke-width="1.5"/><circle cx="32" cy="38" r="5" fill="none" stroke="#000" stroke-width="1.5"/><line x1="32" y1="48" x2="32" y2="60" stroke="#000" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_haltestelle",
|
||||
name: "Haltestelle",
|
||||
filename: "vermessung_haltestelle.svg",
|
||||
tags: ["haltestelle", "bus", "bahn", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="20" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="16" font-weight="bold" fill="#000" text-anchor="middle">H</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_parkplatz",
|
||||
name: "Parkplatz",
|
||||
filename: "vermessung_parkplatz.svg",
|
||||
tags: ["parkplatz", "parken", "stellplatz", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="14" y="14" width="36" height="36" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="40" font-family="Arial" font-size="24" font-weight="bold" fill="#000" text-anchor="middle">P</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_schranke",
|
||||
name: "Schranke",
|
||||
filename: "vermessung_schranke.svg",
|
||||
tags: ["schranke", "bahnübergang", "absperrung", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="12" cy="32" r="6" fill="none" stroke="#000" stroke-width="2"/><line x1="18" y1="32" x2="60" y2="32" stroke="#000" stroke-width="3"/><line x1="24" y1="28" x2="28" y2="36" stroke="#000" stroke-width="2"/><line x1="36" y1="28" x2="40" y2="36" stroke="#000" stroke-width="2"/><line x1="48" y1="28" x2="52" y2="36" stroke="#000" stroke-width="2"/></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// ========== VERMESSUNG - TOPOGRAFIE ==========
|
||||
vermessung_topografie: {
|
||||
name: "Vermessung - Topografie",
|
||||
icon: "🌳",
|
||||
items: [
|
||||
{
|
||||
id: "vm_laubbaum",
|
||||
name: "Laubbaum",
|
||||
filename: "vermessung_laubbaum.svg",
|
||||
tags: ["baum", "laubbaum", "vegetation", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="28" r="18" fill="none" stroke="#000" stroke-width="2"/><line x1="32" y1="46" x2="32" y2="60" stroke="#000" stroke-width="3"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_nadelbaum",
|
||||
name: "Nadelbaum",
|
||||
filename: "vermessung_nadelbaum.svg",
|
||||
tags: ["baum", "nadelbaum", "tanne", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="32,4 48,28 40,28 52,48 12,48 24,28 16,28" fill="none" stroke="#000" stroke-width="2"/><line x1="32" y1="48" x2="32" y2="60" stroke="#000" stroke-width="3"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_gebaeude",
|
||||
name: "Gebäude",
|
||||
filename: "vermessung_gebaeude.svg",
|
||||
tags: ["gebäude", "haus", "bauwerk", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="12" y="20" width="40" height="36" fill="none" stroke="#000" stroke-width="2"/><line x1="12" y1="20" x2="32" y2="8" stroke="#000" stroke-width="2"/><line x1="52" y1="20" x2="32" y2="8" stroke="#000" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_hoehenpunkt",
|
||||
name: "Höhenpunkt",
|
||||
filename: "vermessung_hoehenpunkt.svg",
|
||||
tags: ["höhe", "nivellement", "punkt", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="22" y1="42" x2="42" y2="42" stroke="#000" stroke-width="2"/><line x1="32" y1="42" x2="32" y2="22" stroke="#000" stroke-width="2"/><circle cx="32" cy="22" r="4" fill="#000"/><text x="46" y="28" font-family="Arial" font-size="10" fill="#000">HP</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_boeschung",
|
||||
name: "Böschung",
|
||||
filename: "vermessung_boeschung.svg",
|
||||
tags: ["böschung", "hang", "gelände", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="8" y1="20" x2="56" y2="20" stroke="#000" stroke-width="2"/><line x1="8" y1="44" x2="56" y2="44" stroke="#000" stroke-width="2"/><line x1="12" y1="20" x2="8" y2="44" stroke="#000" stroke-width="1"/><line x1="20" y1="20" x2="16" y2="44" stroke="#000" stroke-width="1"/><line x1="28" y1="20" x2="24" y2="44" stroke="#000" stroke-width="1"/><line x1="36" y1="20" x2="32" y2="44" stroke="#000" stroke-width="1"/><line x1="44" y1="20" x2="40" y2="44" stroke="#000" stroke-width="1"/><line x1="52" y1="20" x2="48" y2="44" stroke="#000" stroke-width="1"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_fliessrichtung",
|
||||
name: "Fließrichtung",
|
||||
filename: "vermessung_fliessrichtung.svg",
|
||||
tags: ["fließrichtung", "gewässer", "bach", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="8" y1="32" x2="48" y2="32" stroke="#000" stroke-width="2"/><polygon points="56,32 44,24 44,40" fill="#000"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_quelle",
|
||||
name: "Quelle",
|
||||
filename: "vermessung_quelle.svg",
|
||||
tags: ["quelle", "wasser", "ursprung", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="16" fill="none" stroke="#000" stroke-width="2"/><path d="M32 24 Q36 28 32 32 Q28 36 32 40" stroke="#000" stroke-width="2" fill="none"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_durchlass",
|
||||
name: "Durchlass",
|
||||
filename: "vermessung_durchlass.svg",
|
||||
tags: ["durchlass", "rohr", "kanal", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="24" width="48" height="16" fill="none" stroke="#000" stroke-width="2"/><line x1="8" y1="32" x2="0" y2="32" stroke="#000" stroke-width="2"/><line x1="56" y1="32" x2="64" y2="32" stroke="#000" stroke-width="2"/></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_kilometerstein",
|
||||
name: "Kilometerstein",
|
||||
filename: "vermessung_kilometerstein.svg",
|
||||
tags: ["kilometer", "stein", "markierung", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="32,8 44,20 44,56 20,56 20,20" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="42" font-family="Arial" font-size="12" fill="#000" text-anchor="middle">km</text></svg>`
|
||||
},
|
||||
{
|
||||
id: "vm_poller",
|
||||
name: "Poller",
|
||||
filename: "vermessung_poller.svg",
|
||||
tags: ["poller", "absperrung", "pfosten", "vermessung"],
|
||||
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="10" fill="#000"/><circle cx="32" cy="32" r="4" fill="#fff"/></svg>`
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
// ========== DYNAMISCHE PFEILE GENERIEREN ==========
|
||||
function generateArrowSVG(angle) {
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="rotate(${angle}, 32, 32)"><rect x="28" y="20" width="8" height="30" fill="#dc2626"/><polygon points="32,4 16,24 24,24 24,20 40,20 40,24 48,24" fill="#dc2626"/></g></svg>`;
|
||||
}
|
||||
|
||||
// DXF-taugliche Pfeile (nur Linien, keine Füllung)
|
||||
function generateArrowDxfSVG(angle) {
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="rotate(${angle}, 32, 32)"><line x1="32" y1="50" x2="32" y2="12" stroke="#000" stroke-width="1"/><polygon points="32,4 22,18 42,18" fill="none" stroke="#000" stroke-width="1"/></g></svg>`;
|
||||
}
|
||||
|
||||
function generateNorthArrowSVG(angle) {
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="rotate(${angle}, 32, 32)"><circle cx="32" cy="32" r="28" fill="none" stroke="#374151" stroke-width="2"/><polygon points="32,6 26,32 32,28 38,32" fill="#dc2626"/><polygon points="32,58 26,32 32,36 38,32" fill="#ffffff" stroke="#374151" stroke-width="1"/><text x="32" y="18" font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="#1f2937" text-anchor="middle">N</text></g></svg>`;
|
||||
}
|
||||
|
||||
// DXF-taugliche Nordpfeile (nur Linien)
|
||||
function generateNorthArrowDxfSVG(angle) {
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="rotate(${angle}, 32, 32)"><circle cx="32" cy="32" r="28" fill="none" stroke="#000" stroke-width="1"/><polygon points="32,6 26,32 38,32" fill="none" stroke="#000" stroke-width="1"/><polygon points="32,58 26,32 38,32" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="18" font-family="Arial" font-size="10" fill="#000" text-anchor="middle">N</text></g></svg>`;
|
||||
}
|
||||
|
||||
// Pfeile und Kompass generieren
|
||||
for (let angle = 0; angle < 360; angle += 15) {
|
||||
SYMBOLS.pfeile.items.push({
|
||||
id: `pfeil_${angle}`,
|
||||
name: `${angle}°`,
|
||||
filename: `richtungspfeil_rot_${angle}grad.svg`,
|
||||
tags: ["pfeil", "richtung", "rot", angle.toString()],
|
||||
svg: generateArrowSVG(angle),
|
||||
dxfSvg: generateArrowDxfSVG(angle)
|
||||
});
|
||||
|
||||
SYMBOLS.kompass.items.push({
|
||||
id: `nord_${angle}`,
|
||||
name: `${angle}°`,
|
||||
filename: `kompass_nord_${angle}grad.svg`,
|
||||
tags: ["nord", "kompass", "himmelsrichtung", angle.toString()],
|
||||
svg: generateNorthArrowSVG(angle),
|
||||
dxfSvg: generateNorthArrowDxfSVG(angle)
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user