zuevav/VH_posting_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add badge price tag controls: position, size, ribbon & digit colors

Browse Source 
Adds four new controls to the digital-badge price tag so users can fine
-tune the look: a vertical position slider (raises/lowers the band
within the circle), a size slider (60-160% of the default band scale),
and two color rows for the ribbon and the digits — each with six
preset swatches plus a native color picker for custom colors.
Per-item state (priceY, priceSize, priceBg, priceFg) is preserved
across selections and renders consistently in the 240x240 export.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
zuevav
2026-05-14 21:51:32 +03:00
parent 68f4560bd5
commit 45a20d1edb
3 changed files with 186 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.php
+30
View File
@@ -638,6 +638,36 @@ https://live.staticflickr.com/65535/12345678901_abcdef1234_b.jpg"></textarea>
</label>
</div>
</div>
<div class="form-group">
<label>Положение по вертикали: <span id="badge-price-y-value">0</span></label>
<input type="range" id="badge-price-y" min="-50" max="20" step="1" value="0">
</div>
<div class="form-group">
<label>Размер плашки: <span id="badge-price-size-value">100%</span></label>
<input type="range" id="badge-price-size" min="60" max="160" step="5" value="100">
</div>
<div class="form-group">
<label>Цвет ленты:</label>
<div class="badge-color-row" data-target="bg">
<button type="button" class="badge-color-swatch" data-color="#FFCC00" style="background:#FFCC00" title="Жёлтый"></button>
<button type="button" class="badge-color-swatch" data-color="#FF3B30" style="background:#FF3B30" title="Красный"></button>
<button type="button" class="badge-color-swatch" data-color="#34C759" style="background:#34C759" title="Зелёный"></button>
<button type="button" class="badge-color-swatch" data-color="#007AFF" style="background:#007AFF" title="Синий"></button>
<button type="button" class="badge-color-swatch" data-color="#000000" style="background:#000000" title="Чёрный"></button>
<button type="button" class="badge-color-swatch" data-color="#FFFFFF" style="background:#FFFFFF;border-color:#ccc" title="Белый"></button>
<input type="color" id="badge-price-bg" value="#FFCC00" title="Свой цвет ленты">
</div>
</div>
<div class="form-group">
<label>Цвет цифр:</label>
<div class="badge-color-row" data-target="fg">
<button type="button" class="badge-color-swatch" data-color="#000000" style="background:#000000" title="Чёрный"></button>
<button type="button" class="badge-color-swatch" data-color="#FFFFFF" style="background:#FFFFFF;border-color:#ccc" title="Белый"></button>
<button type="button" class="badge-color-swatch" data-color="#FFCC00" style="background:#FFCC00" title="Жёлтый"></button>
<button type="button" class="badge-color-swatch" data-color="#FF3B30" style="background:#FF3B30" title="Красный"></button>
<input type="color" id="badge-price-fg" value="#000000" title="Свой цвет цифр">
</div>
</div>
</div>
<hr style="border:none; border-top:1px solid var(--border-color, #ddd); margin:12px 0;">