Update badge defaults and add nickname customization

Changes price-tag defaults to priceY=9 and priceSize=60% (was 0/100)
per real-world feedback — the band sits a bit lower and is more
compact by default. Adds three nickname controls mirroring the price-
tag ones: text size slider (60-160%), edge-offset slider (0-30% inset
from the circle edge, default 14%), and a color row with six preset
swatches plus a native color picker for custom colors. The legacy
white/black radio is gone; existing items with "white"/"black" values
are migrated to hex on first render. Shadow color now auto-flips based
on text brightness so any color stays readable.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
zuevav
2026-05-14 22:46:16 +03:00
parent 45a20d1edb
commit a781deccdd
2 changed files with 101 additions and 42 deletions
+20 -13
View File
@@ -639,12 +639,12 @@ https://live.staticflickr.com/65535/12345678901_abcdef1234_b.jpg"></textarea>
</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">
<label>Положение по вертикали: <span id="badge-price-y-value">9</span></label>
<input type="range" id="badge-price-y" min="-50" max="20" step="1" value="9">
</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">
<label>Размер плашки: <span id="badge-price-size-value">60%</span></label>
<input type="range" id="badge-price-size" min="60" max="160" step="5" value="60">
</div>
<div class="form-group">
<label>Цвет ленты:</label>
@@ -685,17 +685,24 @@ https://live.staticflickr.com/65535/12345678901_abcdef1234_b.jpg"></textarea>
<input type="text" id="badge-nickname-value" maxlength="40" placeholder="Никнейм">
<span class="hint">По умолчанию — из настроек.</span>
</div>
<div class="form-group">
<label>Размер текста: <span id="badge-nick-size-value">100%</span></label>
<input type="range" id="badge-nick-size" min="60" max="160" step="5" value="100">
</div>
<div class="form-group">
<label>Отступ от края: <span id="badge-nick-edge-value">14</span></label>
<input type="range" id="badge-nick-edge" min="0" max="30" step="1" value="14">
</div>
<div class="form-group">
<label>Цвет текста:</label>
<div class="badge-radio-row">
<label class="radio-label">
<input type="radio" name="badge-nick-color" value="white" checked>
<span>Белый (с тенью)</span>
</label>
<label class="radio-label">
<input type="radio" name="badge-nick-color" value="black">
<span>Чёрный</span>
</label>
<div class="badge-color-row" data-target="nick">
<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="#000000" style="background:#000000" 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>
<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>
<input type="color" id="badge-nick-color" value="#FFFFFF" title="Свой цвет текста">
</div>
</div>
</div>