Avatar
All checks were successful
Deploy / deploy (push) Successful in 1m38s

This commit is contained in:
2026-07-27 01:58:53 +02:00
parent 32985d5785
commit 8b106e5b03
4 changed files with 194 additions and 68 deletions

View File

@@ -303,6 +303,51 @@ $sectionLinks = [
<?= \App\Avatar\Lorelei::render($profile, $profile['display_name'] ?: 'Papa', 'xxl') ?>
</div>
<p class="muted small">Wähle eine Lorelei-Variante oder lade dir direkt neue Vorschläge. Die Vorschau aktualisiert sich sofort.</p>
<div class="avatar-component-nav" role="tablist" aria-label="Avatar-Komponenten">
<?php foreach (\App\Avatar\Lorelei::componentDefinitions() as $field => $meta): ?>
<button
type="button"
class="avatar-component-nav__button <?= $field === 'avatar_lorelei_eyes_variant' ? 'is-active' : '' ?>"
data-avatar-component-tab="<?= htmlspecialchars((string)$field, ENT_QUOTES) ?>"
aria-selected="<?= $field === 'avatar_lorelei_eyes_variant' ? 'true' : 'false' ?>"
>
<?= htmlspecialchars((string)$meta['label'], ENT_QUOTES) ?>
</button>
<?php endforeach; ?>
</div>
<div class="avatar-component-panels">
<?php foreach (\App\Avatar\Lorelei::componentDefinitions() as $field => $meta): ?>
<section class="avatar-component-panel <?= $field === 'avatar_lorelei_eyes_variant' ? 'is-active' : '' ?>" data-avatar-component-panel="<?= htmlspecialchars((string)$field, ENT_QUOTES) ?>">
<div class="avatar-component-panel__head">
<strong><?= htmlspecialchars((string)$meta['label'], ENT_QUOTES) ?></strong>
<span class="muted small">Direkt mit Vorschau auswählbar</span>
</div>
<div class="avatar-component-grid">
<?php foreach (\App\Avatar\Lorelei::previewChoices($profile, $field) as $choice): ?>
<label class="avatar-component-card">
<input
type="radio"
name="<?= htmlspecialchars((string)$field, ENT_QUOTES) ?>"
value="<?= htmlspecialchars((string)$choice['value'], ENT_QUOTES) ?>"
data-avatar-field="<?= htmlspecialchars((string)$field, ENT_QUOTES) ?>"
<?= $choice['checked'] ? 'checked' : '' ?>
>
<span class="avatar-component-card__thumb">
<img
src="<?= htmlspecialchars((string)$choice['image'], ENT_QUOTES) ?>"
alt="<?= htmlspecialchars((string)$choice['label'], ENT_QUOTES) ?>"
data-avatar-option-thumb
data-avatar-option-field="<?= htmlspecialchars((string)$field, ENT_QUOTES) ?>"
data-avatar-option-value="<?= htmlspecialchars((string)$choice['value'], ENT_QUOTES) ?>"
>
</span>
<span class="avatar-component-card__label"><?= htmlspecialchars((string)$choice['label'], ENT_QUOTES) ?></span>
</label>
<?php endforeach; ?>
</div>
</section>
<?php endforeach; ?>
</div>
</div>
<div class="avatar-builder__controls">
<div class="flex gap-12" style="flex-wrap:wrap;">
@@ -322,77 +367,19 @@ $sectionLinks = [
<?= $profile['avatar_preset'] === $meta['seed'] || ($profile['avatar_preset'] === '' && $index === 0) ? 'checked' : '' ?>
>
<span class="avatar-preset-card__thumb">
<img src="<?= htmlspecialchars((string)$meta['image'], ENT_QUOTES) ?>" alt="<?= htmlspecialchars((string)$meta['label'], ENT_QUOTES) ?>">
<img
src="<?= htmlspecialchars((string)$meta['image'], ENT_QUOTES) ?>"
alt="<?= htmlspecialchars((string)$meta['label'], ENT_QUOTES) ?>"
data-avatar-option-thumb
data-avatar-option-field="avatar_preset"
data-avatar-option-value="<?= htmlspecialchars((string)$meta['seed'], ENT_QUOTES) ?>"
>
</span>
<span class="avatar-preset-card__label"><?= htmlspecialchars((string)$meta['label'], ENT_QUOTES) ?></span>
</label>
<?php endforeach; ?>
</div>
</div>
<div class="form-grid">
<div class="stack gap-6">
<label class="label" for="avatarEyesVariant">Augen</label>
<select id="avatarEyesVariant" name="avatar_lorelei_eyes_variant" class="select" data-avatar-field="avatar_lorelei_eyes_variant">
<?php foreach ($avatarOptions['avatar_lorelei_eyes_variant'] as $value => $label): ?>
<option value="<?= htmlspecialchars((string)$value, ENT_QUOTES) ?>" <?= $profile['avatar_lorelei_eyes_variant'] === $value ? 'selected' : '' ?>><?= htmlspecialchars((string)$label, ENT_QUOTES) ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="stack gap-6">
<label class="label" for="avatarEyebrowsVariant">Augenbrauen</label>
<select id="avatarEyebrowsVariant" name="avatar_lorelei_eyebrows_variant" class="select" data-avatar-field="avatar_lorelei_eyebrows_variant">
<?php foreach ($avatarOptions['avatar_lorelei_eyebrows_variant'] as $value => $label): ?>
<option value="<?= htmlspecialchars((string)$value, ENT_QUOTES) ?>" <?= $profile['avatar_lorelei_eyebrows_variant'] === $value ? 'selected' : '' ?>><?= htmlspecialchars((string)$label, ENT_QUOTES) ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="form-grid">
<div class="stack gap-6">
<label class="label" for="avatarMouthVariant">Mund</label>
<select id="avatarMouthVariant" name="avatar_lorelei_mouth_variant" class="select" data-avatar-field="avatar_lorelei_mouth_variant">
<?php foreach ($avatarOptions['avatar_lorelei_mouth_variant'] as $value => $label): ?>
<option value="<?= htmlspecialchars((string)$value, ENT_QUOTES) ?>" <?= $profile['avatar_lorelei_mouth_variant'] === $value ? 'selected' : '' ?>><?= htmlspecialchars((string)$label, ENT_QUOTES) ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="stack gap-6">
<label class="label" for="avatarGlassesVariant">Brille</label>
<select id="avatarGlassesVariant" name="avatar_lorelei_glasses_variant" class="select" data-avatar-field="avatar_lorelei_glasses_variant">
<?php foreach ($avatarOptions['avatar_lorelei_glasses_variant'] as $value => $label): ?>
<option value="<?= htmlspecialchars((string)$value, ENT_QUOTES) ?>" <?= $profile['avatar_lorelei_glasses_variant'] === $value ? 'selected' : '' ?>><?= htmlspecialchars((string)$label, ENT_QUOTES) ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="form-grid">
<div class="stack gap-6">
<label class="label" for="avatarHairVariant">Haare</label>
<select id="avatarHairVariant" name="avatar_lorelei_hair_variant" class="select" data-avatar-field="avatar_lorelei_hair_variant">
<?php foreach ($avatarOptions['avatar_lorelei_hair_variant'] as $value => $label): ?>
<option value="<?= htmlspecialchars((string)$value, ENT_QUOTES) ?>" <?= $profile['avatar_lorelei_hair_variant'] === $value ? 'selected' : '' ?>><?= htmlspecialchars((string)$label, ENT_QUOTES) ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="stack gap-6">
<label class="label" for="avatarBeardVariant">Bart</label>
<select id="avatarBeardVariant" name="avatar_lorelei_beard_variant" class="select" data-avatar-field="avatar_lorelei_beard_variant">
<?php foreach ($avatarOptions['avatar_lorelei_beard_variant'] as $value => $label): ?>
<option value="<?= htmlspecialchars((string)$value, ENT_QUOTES) ?>" <?= $profile['avatar_lorelei_beard_variant'] === $value ? 'selected' : '' ?>><?= htmlspecialchars((string)$label, ENT_QUOTES) ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="form-grid">
<div class="stack gap-6">
<label class="label" for="avatarEarringsVariant">Ohrringe</label>
<select id="avatarEarringsVariant" name="avatar_lorelei_earrings_variant" class="select" data-avatar-field="avatar_lorelei_earrings_variant">
<?php foreach ($avatarOptions['avatar_lorelei_earrings_variant'] as $value => $label): ?>
<option value="<?= htmlspecialchars((string)$value, ENT_QUOTES) ?>" <?= $profile['avatar_lorelei_earrings_variant'] === $value ? 'selected' : '' ?>><?= htmlspecialchars((string)$label, ENT_QUOTES) ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
</div>
<div class="flex gap-12">