adasd
All checks were successful
Deploy / deploy (push) Successful in 1m5s

This commit is contained in:
2026-07-29 20:57:47 +02:00
parent 0e73147886
commit 37bea188d5
7 changed files with 110 additions and 208 deletions

View File

@@ -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>