Integrate symbols/ into main repo
- Added symbols/ folder (previously separate repo) - Removed symbols/ from .gitignore - Updated CLAUDE.md documentation - Deleted separate Symbols repo on Gitea 🤖 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
385
symbols/index3.html
Normal file
385
symbols/index3.html
Normal file
@@ -0,0 +1,385 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user