admin/SPA-landing
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Gitea Issue #1: Text-Generator Verbesserungen

Browse Source 
- Rahmenform Standard auf 'Rechteck' gesetzt (statt 'Keiner')
- Pfeile werden nun korrekt im SVG-Bereich dargestellt (viewBox + Padding)
- Numerische Eingabefelder neben allen Slidern hinzugefügt
- Text-Positionierung im Rahmen ermöglicht (horizontal + vertikal)

🤖 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
2025-12-14 21:51:20 +01:00
parent d707c5001d
commit acfd23ec57
5 changed files with 265 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
symbols/index.html
View File

@@ -48,7 +48,8 @@
<div class="text-input-group">
<label>Schriftgroesse:</label>
<input type="range" id="fontSize" min="8" max="48" value="16">
<span id="fontSizeValue">16px</span>
<input type="number" id="fontSizeNum" min="8" max="48" value="16" class="num-input">
<span class="num-unit">px</span>
</div>
</div>
@@ -75,8 +76,8 @@
<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="none" title="Kein Rahmen">Keiner</button>
<button class="shape-btn active" 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>
@@ -86,20 +87,22 @@
</div>
<!-- Zeile 4: Rahmen-Skalierung -->
<div class="text-generator-row" id="frameScaleRow" style="display: none;">
<div class="text-generator-row" id="frameScaleRow">
<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>
<input type="number" id="frameScaleNum" min="100" max="300" value="100" class="num-input">
<span class="num-unit">%</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>
<label>Gesamt-Padding:</label>
<input type="range" id="paddingAll" min="0" max="50" value="10">
<span id="paddingAllValue">10px</span>
<input type="number" id="paddingAllNum" min="0" max="50" value="10" class="num-input">
<span class="num-unit">px</span>
</div>
</div>
@@ -127,6 +130,26 @@
</div>
</div>
<!-- Zeile 4d: Text-Positionierung -->
<div class="text-generator-row" id="textAlignRow">
<div class="text-input-group">
<label>Text horizontal:</label>
<div class="align-options">
<button class="align-btn" data-align-x="left" title="Links">Links</button>
<button class="align-btn active" data-align-x="center" title="Mitte">Mitte</button>
<button class="align-btn" data-align-x="right" title="Rechts">Rechts</button>
</div>
</div>
<div class="text-input-group">
<label>Text vertikal:</label>
<div class="align-options">
<button class="align-btn" data-align-y="top" title="Oben">Oben</button>
<button class="align-btn active" data-align-y="center" title="Mitte">Mitte</button>
<button class="align-btn" data-align-y="bottom" title="Unten">Unten</button>
</div>
</div>
</div>
<!-- Zeile 5: Linienstil und Staerke -->
<div class="text-generator-row">
<div class="text-input-group">
@@ -166,31 +189,36 @@
<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>
<input type="number" id="arrowLengthNum" min="20" max="200" value="40" class="num-input">
<span class="num-unit">px</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>
<input type="number" id="arrowAngleNum" min="-90" max="90" value="0" class="num-input">
<span class="num-unit">°</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>
<input type="number" id="arrowBendNum" min="0" max="100" value="50" class="num-input">
<span class="num-unit">%</span>
</div>
</div>
<!-- Zeile 7b: Pfeilspitzen-Details -->
<div class="text-generator-row" id="arrowDetailsRow2">
<div class="text-input-group">
<label>Pfeilspitzen-Breite:</label>
<label>Spitzen-Breite:</label>
<input type="range" id="arrowSize" min="5" max="30" value="10">
<span id="arrowSizeValue">10px</span>
<input type="number" id="arrowSizeNum" min="5" max="30" value="10" class="num-input">
<span class="num-unit">px</span>
</div>
<div class="text-input-group">
<label>Pfeilspitzen-Laenge:</label>
<label>Spitzen-Laenge:</label>
<input type="range" id="arrowTipLength" min="5" max="40" value="15">
<span id="arrowTipLengthValue">15px</span>
<input type="number" id="arrowTipLengthNum" min="5" max="40" value="15" class="num-input">
<span class="num-unit">px</span>
</div>
</div>