ycyxcx

partials/landing/account/dashboard.php

@@ -302,19 +302,118 @@ $sectionLinks = [
             <div data-avatar-preview>
               <?= \App\Avatar::render($profile, $profile['display_name'] ?: 'Papa', 'xxl') ?>
             </div>
-            <p class="muted small">Wähle ein modernes Preset aus deiner Stilfamilie. Die Vorschau wird sofort aktualisiert.</p>
+            <p class="muted small">Stell dein Portrait direkt aus Haaren, Bart, Brille, Mütze, Outfit und Farben zusammen. Die Vorschau wird sofort aktualisiert.</p>
           </div>
           <div class="avatar-builder__controls">
             <div class="stack gap-6">
-              <span class="label">Modernes Avatar-Preset</span>
-              <div class="avatar-preset-grid">
-                <?php foreach ($avatarPresetOptions as $value => $meta): ?>
-                  <label class="avatar-preset-card">
-                    <input type="radio" name="avatar_preset" value="<?= htmlspecialchars((string)$value, ENT_QUOTES) ?>" data-avatar-preset-option data-avatar-src="<?= htmlspecialchars((string)$meta['src'], ENT_QUOTES) ?>" <?= ($profile['avatar_preset'] ?? 'modern_01') === $value ? 'checked' : '' ?>>
-                    <span class="avatar-preset-card__thumb">
-                      <img src="<?= htmlspecialchars((string)$meta['src'], ENT_QUOTES) ?>" alt="">
-                    </span>
-                    <span class="avatar-preset-card__label"><?= htmlspecialchars((string)$meta['label'], ENT_QUOTES) ?></span>
+              <label class="label" for="avatarHeadShape">Kopfform</label>
+              <select id="avatarHeadShape" name="avatar_head_shape" class="select" data-avatar-field="avatar_head_shape">
+                <?php foreach ($avatarOptions['avatar_head_shape'] as $value => $label): ?>
+                  <option value="<?= htmlspecialchars((string)$value, ENT_QUOTES) ?>" <?= $profile['avatar_head_shape'] === $value ? 'selected' : '' ?>><?= htmlspecialchars((string)$label, ENT_QUOTES) ?></option>
+                <?php endforeach; ?>
+              </select>
+            </div>
+            <div class="stack gap-6">
+              <label class="label" for="avatarHairStyle">Haarform</label>
+              <select id="avatarHairStyle" name="avatar_hair_style" class="select" data-avatar-field="avatar_hair_style">
+                <?php foreach ($avatarOptions['avatar_hair_style'] as $value => $label): ?>
+                  <option value="<?= htmlspecialchars((string)$value, ENT_QUOTES) ?>" <?= $profile['avatar_hair_style'] === $value ? 'selected' : '' ?>><?= htmlspecialchars((string)$label, ENT_QUOTES) ?></option>
+                <?php endforeach; ?>
+              </select>
+            </div>
+            <div class="stack gap-6">
+              <label class="label" for="avatarBeardStyle">Bart</label>
+              <select id="avatarBeardStyle" name="avatar_beard_style" class="select" data-avatar-field="avatar_beard_style">
+                <?php foreach ($avatarOptions['avatar_beard_style'] as $value => $label): ?>
+                  <option value="<?= htmlspecialchars((string)$value, ENT_QUOTES) ?>" <?= $profile['avatar_beard_style'] === $value ? 'selected' : '' ?>><?= htmlspecialchars((string)$label, ENT_QUOTES) ?></option>
+                <?php endforeach; ?>
+              </select>
+            </div>
+            <div class="stack gap-6">
+              <label class="label" for="avatarGlassesStyle">Brille</label>
+              <select id="avatarGlassesStyle" name="avatar_glasses_style" class="select" data-avatar-field="avatar_glasses_style">
+                <?php foreach ($avatarOptions['avatar_glasses_style'] as $value => $label): ?>
+                  <option value="<?= htmlspecialchars((string)$value, ENT_QUOTES) ?>" <?= $profile['avatar_glasses_style'] === $value ? 'selected' : '' ?>><?= htmlspecialchars((string)$label, ENT_QUOTES) ?></option>
+                <?php endforeach; ?>
+              </select>
+            </div>
+            <div class="stack gap-6">
+              <label class="label" for="avatarHatStyle">Mütze</label>
+              <select id="avatarHatStyle" name="avatar_hat_style" class="select" data-avatar-field="avatar_hat_style">
+                <?php foreach ($avatarOptions['avatar_hat_style'] as $value => $label): ?>
+                  <option value="<?= htmlspecialchars((string)$value, ENT_QUOTES) ?>" <?= $profile['avatar_hat_style'] === $value ? 'selected' : '' ?>><?= htmlspecialchars((string)$label, ENT_QUOTES) ?></option>
+                <?php endforeach; ?>
+              </select>
+            </div>
+            <div class="stack gap-6">
+              <label class="label" for="avatarOutfitStyle">Outfit</label>
+              <select id="avatarOutfitStyle" name="avatar_outfit_style" class="select" data-avatar-field="avatar_outfit_style">
+                <?php foreach ($avatarOptions['avatar_outfit_style'] as $value => $label): ?>
+                  <option value="<?= htmlspecialchars((string)$value, ENT_QUOTES) ?>" <?= $profile['avatar_outfit_style'] === $value ? 'selected' : '' ?>><?= htmlspecialchars((string)$label, ENT_QUOTES) ?></option>
+                <?php endforeach; ?>
+              </select>
+            </div>
+
+            <div class="stack gap-6">
+              <span class="label">Hautfarbe</span>
+              <div class="avatar-swatch-group">
+                <?php foreach ($avatarOptions['avatar_skin_tone'] as $value => $meta): ?>
+                  <label class="avatar-swatch">
+                    <input type="radio" name="avatar_skin_tone" value="<?= htmlspecialchars((string)$value, ENT_QUOTES) ?>" data-avatar-field="avatar_skin_tone" data-avatar-color="<?= htmlspecialchars((string)$meta['color'], ENT_QUOTES) ?>" <?= $profile['avatar_skin_tone'] === $value ? 'checked' : '' ?>>
+                    <span class="avatar-swatch__color" style="--swatch-color: <?= htmlspecialchars((string)$meta['color'], ENT_QUOTES) ?>;"></span>
+                    <span><?= htmlspecialchars((string)$meta['label'], ENT_QUOTES) ?></span>
+                  </label>
+                <?php endforeach; ?>
+              </div>
+            </div>
+
+            <div class="stack gap-6">
+              <span class="label">Haarfarbe</span>
+              <div class="avatar-swatch-group">
+                <?php foreach ($avatarOptions['avatar_hair_color'] as $value => $meta): ?>
+                  <label class="avatar-swatch">
+                    <input type="radio" name="avatar_hair_color" value="<?= htmlspecialchars((string)$value, ENT_QUOTES) ?>" data-avatar-field="avatar_hair_color" data-avatar-color="<?= htmlspecialchars((string)$meta['color'], ENT_QUOTES) ?>" <?= $profile['avatar_hair_color'] === $value ? 'checked' : '' ?>>
+                    <span class="avatar-swatch__color" style="--swatch-color: <?= htmlspecialchars((string)$meta['color'], ENT_QUOTES) ?>;"></span>
+                    <span><?= htmlspecialchars((string)$meta['label'], ENT_QUOTES) ?></span>
+                  </label>
+                <?php endforeach; ?>
+              </div>
+            </div>
+
+            <div class="stack gap-6">
+              <span class="label">Augenfarbe</span>
+              <div class="avatar-swatch-group">
+                <?php foreach ($avatarOptions['avatar_eye_color'] as $value => $meta): ?>
+                  <label class="avatar-swatch">
+                    <input type="radio" name="avatar_eye_color" value="<?= htmlspecialchars((string)$value, ENT_QUOTES) ?>" data-avatar-field="avatar_eye_color" data-avatar-color="<?= htmlspecialchars((string)$meta['color'], ENT_QUOTES) ?>" <?= $profile['avatar_eye_color'] === $value ? 'checked' : '' ?>>
+                    <span class="avatar-swatch__color" style="--swatch-color: <?= htmlspecialchars((string)$meta['color'], ENT_QUOTES) ?>;"></span>
+                    <span><?= htmlspecialchars((string)$meta['label'], ENT_QUOTES) ?></span>
+                  </label>
+                <?php endforeach; ?>
+              </div>
+            </div>
+
+            <div class="stack gap-6">
+              <span class="label">Mützenfarbe</span>
+              <div class="avatar-swatch-group">
+                <?php foreach ($avatarOptions['avatar_hat_color'] as $value => $meta): ?>
+                  <label class="avatar-swatch">
+                    <input type="radio" name="avatar_hat_color" value="<?= htmlspecialchars((string)$value, ENT_QUOTES) ?>" data-avatar-field="avatar_hat_color" data-avatar-color="<?= htmlspecialchars((string)$meta['color'], ENT_QUOTES) ?>" <?= $profile['avatar_hat_color'] === $value ? 'checked' : '' ?>>
+                    <span class="avatar-swatch__color" style="--swatch-color: <?= htmlspecialchars((string)$meta['color'], ENT_QUOTES) ?>;"></span>
+                    <span><?= htmlspecialchars((string)$meta['label'], ENT_QUOTES) ?></span>
+                  </label>
+                <?php endforeach; ?>
+              </div>
+            </div>
+
+            <div class="stack gap-6">
+              <span class="label">Outfit-Farbe</span>
+              <div class="avatar-swatch-group">
+                <?php foreach ($avatarOptions['avatar_outfit_color'] as $value => $meta): ?>
+                  <label class="avatar-swatch">
+                    <input type="radio" name="avatar_outfit_color" value="<?= htmlspecialchars((string)$value, ENT_QUOTES) ?>" data-avatar-field="avatar_outfit_color" data-avatar-color="<?= htmlspecialchars((string)$meta['color'], ENT_QUOTES) ?>" <?= $profile['avatar_outfit_color'] === $value ? 'checked' : '' ?>>
+                    <span class="avatar-swatch__color" style="--swatch-color: <?= htmlspecialchars((string)$meta['color'], ENT_QUOTES) ?>;"></span>
+                    <span><?= htmlspecialchars((string)$meta['label'], ENT_QUOTES) ?></span>
                   </label>
                 <?php endforeach; ?>
               </div>