This commit is contained in:
@@ -378,110 +378,64 @@ $sectionLinks = [
|
||||
</label>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php $componentColors = $component['colors'] ?? []; ?>
|
||||
<?php if ($componentColors): ?>
|
||||
<div class="form-grid" style="margin-top:18px;">
|
||||
<?php foreach ($componentColors as $colorField => $colorMeta): ?>
|
||||
<?php
|
||||
$colorValue = (string)($colorMeta['value'] ?? '');
|
||||
$colorDefault = (string)($colorMeta['default'] ?? '#c4a484');
|
||||
$samples = is_array($colorMeta['samples'] ?? null) ? $colorMeta['samples'] : [];
|
||||
?>
|
||||
<div class="stack gap-6">
|
||||
<label class="label" for="avatarColor<?= htmlspecialchars($styleKey . $colorField, ENT_QUOTES) ?>"><?= htmlspecialchars((string)($colorMeta['label'] ?? $colorField), ENT_QUOTES) ?></label>
|
||||
<input
|
||||
type="hidden"
|
||||
name="avatar_config[<?= htmlspecialchars($styleKey, ENT_QUOTES) ?>][<?= htmlspecialchars((string)$colorField, ENT_QUOTES) ?>]"
|
||||
value="<?= htmlspecialchars($colorValue, ENT_QUOTES) ?>"
|
||||
data-avatar-style="<?= htmlspecialchars($styleKey, ENT_QUOTES) ?>"
|
||||
data-avatar-color-input="<?= htmlspecialchars((string)$colorField, ENT_QUOTES) ?>"
|
||||
>
|
||||
<div class="flex gap-12 center-y" style="flex-wrap:wrap;">
|
||||
<input
|
||||
id="avatarColor<?= htmlspecialchars($styleKey . $colorField, ENT_QUOTES) ?>"
|
||||
type="color"
|
||||
value="<?= htmlspecialchars($colorValue !== '' ? $colorValue : $colorDefault, ENT_QUOTES) ?>"
|
||||
data-avatar-style="<?= htmlspecialchars($styleKey, ENT_QUOTES) ?>"
|
||||
data-avatar-color-picker="<?= htmlspecialchars((string)$colorField, ENT_QUOTES) ?>"
|
||||
data-avatar-color-default="<?= htmlspecialchars($colorDefault, ENT_QUOTES) ?>"
|
||||
style="width:64px; height:44px; padding:4px;"
|
||||
>
|
||||
<button
|
||||
class="btn ghost"
|
||||
type="button"
|
||||
data-avatar-style="<?= htmlspecialchars($styleKey, ENT_QUOTES) ?>"
|
||||
data-avatar-color-reset="<?= htmlspecialchars((string)$colorField, ENT_QUOTES) ?>"
|
||||
>Standard</button>
|
||||
</div>
|
||||
<?php if ($samples): ?>
|
||||
<div class="flex gap-8 center-y" style="flex-wrap:wrap;">
|
||||
<?php foreach ($samples as $sampleColor): ?>
|
||||
<button
|
||||
type="button"
|
||||
class="avatar-color-sample"
|
||||
title="<?= htmlspecialchars((string)$sampleColor, ENT_QUOTES) ?>"
|
||||
aria-label="<?= htmlspecialchars((string)$sampleColor, ENT_QUOTES) ?>"
|
||||
data-avatar-style="<?= htmlspecialchars($styleKey, ENT_QUOTES) ?>"
|
||||
data-avatar-color-sample-field="<?= htmlspecialchars((string)$colorField, ENT_QUOTES) ?>"
|
||||
data-avatar-color-sample-value="<?= htmlspecialchars((string)$sampleColor, ENT_QUOTES) ?>"
|
||||
style="width:32px; height:32px; border-radius:10px; border:1px solid var(--color-border); background: <?= htmlspecialchars((string)$sampleColor, ENT_QUOTES) ?>;"
|
||||
></button>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</section>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php $styleColors = $styleMeta['colors'] ?? []; ?>
|
||||
<?php if ($styleColors): ?>
|
||||
<div class="account-panel" style="margin-top:18px;">
|
||||
<div class="account-panel__head">
|
||||
<h3>Farben</h3>
|
||||
<p class="muted small">Alle aktuell für diesen DiceBear-Style unterstützten Farbfelder.</p>
|
||||
</div>
|
||||
<div class="account-panel__body">
|
||||
<div class="form-grid">
|
||||
<?php foreach ($styleColors as $colorField => $colorMeta): ?>
|
||||
<?php
|
||||
$colorValue = (string)($colorMeta['value'] ?? '');
|
||||
$colorDefault = (string)($colorMeta['default'] ?? '#c4a484');
|
||||
?>
|
||||
<div class="stack gap-6">
|
||||
<label class="label" for="avatarColor<?= htmlspecialchars($styleKey . $colorField, ENT_QUOTES) ?>"><?= htmlspecialchars((string)($colorMeta['label'] ?? $colorField), ENT_QUOTES) ?></label>
|
||||
<input
|
||||
type="hidden"
|
||||
name="avatar_config[<?= htmlspecialchars($styleKey, ENT_QUOTES) ?>][<?= htmlspecialchars((string)$colorField, ENT_QUOTES) ?>]"
|
||||
value="<?= htmlspecialchars($colorValue, ENT_QUOTES) ?>"
|
||||
data-avatar-style="<?= htmlspecialchars($styleKey, ENT_QUOTES) ?>"
|
||||
data-avatar-color-input="<?= htmlspecialchars((string)$colorField, ENT_QUOTES) ?>"
|
||||
>
|
||||
<div class="flex gap-12 center-y" style="flex-wrap:wrap;">
|
||||
<input
|
||||
id="avatarColor<?= htmlspecialchars($styleKey . $colorField, ENT_QUOTES) ?>"
|
||||
type="color"
|
||||
value="<?= htmlspecialchars($colorValue !== '' ? $colorValue : $colorDefault, ENT_QUOTES) ?>"
|
||||
data-avatar-style="<?= htmlspecialchars($styleKey, ENT_QUOTES) ?>"
|
||||
data-avatar-color-picker="<?= htmlspecialchars((string)$colorField, ENT_QUOTES) ?>"
|
||||
data-avatar-color-default="<?= htmlspecialchars($colorDefault, ENT_QUOTES) ?>"
|
||||
style="width:64px; height:44px; padding:4px;"
|
||||
>
|
||||
<button
|
||||
class="btn ghost"
|
||||
type="button"
|
||||
data-avatar-style="<?= htmlspecialchars($styleKey, ENT_QUOTES) ?>"
|
||||
data-avatar-color-reset="<?= htmlspecialchars((string)$colorField, ENT_QUOTES) ?>"
|
||||
>Standard</button>
|
||||
<span class="muted small" data-avatar-color-label="<?= htmlspecialchars($styleKey . ':' . (string)$colorField, ENT_QUOTES) ?>">
|
||||
<?= $colorValue !== '' ? htmlspecialchars($colorValue, ENT_QUOTES) : 'DiceBear-Standard' ?>
|
||||
</span>
|
||||
</div>
|
||||
<div class="form-grid" style="margin-top:6px;">
|
||||
<div class="stack gap-6">
|
||||
<label class="label" for="avatarFill<?= htmlspecialchars($styleKey . $colorField, ENT_QUOTES) ?>">Füllung</label>
|
||||
<select
|
||||
id="avatarFill<?= htmlspecialchars($styleKey . $colorField, ENT_QUOTES) ?>"
|
||||
name="avatar_config[<?= htmlspecialchars($styleKey, ENT_QUOTES) ?>][<?= htmlspecialchars((string)$colorField, ENT_QUOTES) ?>Fill]"
|
||||
class="select"
|
||||
data-avatar-style="<?= htmlspecialchars($styleKey, ENT_QUOTES) ?>"
|
||||
data-avatar-color-meta="<?= htmlspecialchars((string)$colorField, ENT_QUOTES) ?>"
|
||||
data-avatar-color-meta-type="fill"
|
||||
>
|
||||
<option value="" <?= (($colorMeta['fill'] ?? '') === '') ? 'selected' : '' ?>>Standard</option>
|
||||
<option value="solid" <?= (($colorMeta['fill'] ?? '') === 'solid') ? 'selected' : '' ?>>Solid</option>
|
||||
<option value="linear" <?= (($colorMeta['fill'] ?? '') === 'linear') ? 'selected' : '' ?>>Linear</option>
|
||||
<option value="radial" <?= (($colorMeta['fill'] ?? '') === 'radial') ? 'selected' : '' ?>>Radial</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="stack gap-6">
|
||||
<label class="label" for="avatarStops<?= htmlspecialchars($styleKey . $colorField, ENT_QUOTES) ?>">Farb-Stopps</label>
|
||||
<input
|
||||
id="avatarStops<?= htmlspecialchars($styleKey . $colorField, ENT_QUOTES) ?>"
|
||||
type="number"
|
||||
min="2"
|
||||
max="8"
|
||||
step="1"
|
||||
name="avatar_config[<?= htmlspecialchars($styleKey, ENT_QUOTES) ?>][<?= htmlspecialchars((string)$colorField, ENT_QUOTES) ?>FillStops]"
|
||||
class="input"
|
||||
value="<?= htmlspecialchars((string)($colorMeta['fill_stops'] ?? ''), ENT_QUOTES) ?>"
|
||||
placeholder="Standard"
|
||||
data-avatar-style="<?= htmlspecialchars($styleKey, ENT_QUOTES) ?>"
|
||||
data-avatar-color-meta="<?= htmlspecialchars((string)$colorField, ENT_QUOTES) ?>"
|
||||
data-avatar-color-meta-type="fillStops"
|
||||
>
|
||||
</div>
|
||||
<div class="stack gap-6">
|
||||
<label class="label" for="avatarAngle<?= htmlspecialchars($styleKey . $colorField, ENT_QUOTES) ?>">Winkel</label>
|
||||
<input
|
||||
id="avatarAngle<?= htmlspecialchars($styleKey . $colorField, ENT_QUOTES) ?>"
|
||||
type="number"
|
||||
min="-360"
|
||||
max="360"
|
||||
step="1"
|
||||
name="avatar_config[<?= htmlspecialchars($styleKey, ENT_QUOTES) ?>][<?= htmlspecialchars((string)$colorField, ENT_QUOTES) ?>Angle]"
|
||||
class="input"
|
||||
value="<?= htmlspecialchars((string)($colorMeta['angle'] ?? ''), ENT_QUOTES) ?>"
|
||||
placeholder="Standard"
|
||||
data-avatar-style="<?= htmlspecialchars($styleKey, ENT_QUOTES) ?>"
|
||||
data-avatar-color-meta="<?= htmlspecialchars((string)$colorField, ENT_QUOTES) ?>"
|
||||
data-avatar-color-meta-type="angle"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user