projects/papa-kind-treff.info
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2026-07-29 21:27:36 +02:00
parent ae34348b29
commit f0ff95679b
6 changed files with 82 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.projektstructure.txt
View File

@@ -7,6 +7,7 @@ Aktueller Projektstand
- Die Avatar-Konfiguration liegt in `config/avatar.php`. - Die Avatar-Konfiguration liegt in `config/avatar.php`.
- Der Avatar-Proxy liegt unter `public/api/avatar.php`. - Der Avatar-Proxy liegt unter `public/api/avatar.php`.
- Die visuelle Avatar-Konfiguration liegt im Dashboard-Modal unter `partials/landing/account/dashboard.php` und rendert Komponenten-Vorschauen live nach. - Die visuelle Avatar-Konfiguration liegt im Dashboard-Modal unter `partials/landing/account/dashboard.php` und rendert Komponenten-Vorschauen live nach.
- Das Avatar-Modal ist auf Browserhoehe optimiert: kompakter Kopfbereich, fixe Komponenten-Navigation, scrollende Variantenliste und kleine Farbfelder mit `Standard`-Reset pro Komponente.
- Der Generator speichert `avatar_style`, `avatar_seed` und `avatar_config_json` generisch im Profil. - Der Generator speichert `avatar_style`, `avatar_seed` und `avatar_config_json` generisch im Profil.
- Der Generator zeigt pro Style die von DiceBear unterstützten Farbfelder direkt in den passenden Komponentenabschnitten und speichert diese im gleichen Config-JSON. - Der Generator zeigt pro Style die von DiceBear unterstützten Farbfelder direkt in den passenden Komponentenabschnitten und speichert diese im gleichen Config-JSON.
- Gespeicherte Benutzer-Avatare werden lokal unter `public/assets/avatars/users/ptk-<userId>.svg` abgelegt und bei Änderungen überschrieben. - Gespeicherte Benutzer-Avatare werden lokal unter `public/assets/avatars/users/ptk-<userId>.svg` abgelegt und bei Änderungen überschrieben.

2
PROJECT_CONTEXT.md
View File

@@ -26,7 +26,7 @@ Papa-Kind-Treff ist eine PHP-basierte Plattform für Väter. Kernbereiche sind l
- Standortfunktionen sind relevant für lokale Treffen und werden künftig weiter ausgebaut. - Standortfunktionen sind relevant für lokale Treffen und werden künftig weiter ausgebaut.
- Profilbilder werden aktuell über die Mehr-Style-Architektur serverseitig erzeugt; aktiv sind derzeit `lorelei` und `croodles`. - Profilbilder werden aktuell über die Mehr-Style-Architektur serverseitig erzeugt; aktiv sind derzeit `lorelei` und `croodles`.
- Stil, Seed und Varianten werden generisch im Profil gespeichert; das fertige SVG wird lokal pro Benutzer unter `ptk-<userId>.svg` abgelegt. - Stil, Seed und Varianten werden generisch im Profil gespeichert; das fertige SVG wird lokal pro Benutzer unter `ptk-<userId>.svg` abgelegt.
- Der Avatar-Editor bietet visuelle Komponenten-Vorschauen statt reiner Text-Dropdowns, laedt nur den aktiven Style/Tab nach und zeigt die Farbfelder direkt im passenden Komponentenabschnitt an. - Der Avatar-Editor bietet visuelle Komponenten-Vorschauen statt reiner Text-Dropdowns, laedt nur den aktiven Style/Tab nach, zeigt die Farbfelder direkt im passenden Komponentenabschnitt an und haelt Kopfbereich sowie Komponentenleiste im Modal fixiert.
## Navigation / Konto ## Navigation / Konto
- Eingeloggte Nutzer sehen rechts ein Profil-Menü statt einzelner `Dashboard`-/`Logout`-Buttons. - Eingeloggte Nutzer sehen rechts ein Profil-Menü statt einzelner `Dashboard`-/`Logout`-Buttons.

2
README.md
View File

@@ -19,7 +19,7 @@ Papa-Kind-Treff ist eine PHP-basierte Plattform für Väter mit Fokus auf lokale
- eigener Einstellungsbereich für Standortfreigabe, Browser-Hinweise und Consent-Verwaltung - eigener Einstellungsbereich für Standortfreigabe, Browser-Hinweise und Consent-Verwaltung
- modernes Avatar-System mit zentraler Mehr-Style-Architektur auf Basis von DiceBear - modernes Avatar-System mit zentraler Mehr-Style-Architektur auf Basis von DiceBear
- aktive Avatar-Styles aktuell: `lorelei` und `croodles`; weitere Styles können über `config/avatar.php` freigeschaltet werden - aktive Avatar-Styles aktuell: `lorelei` und `croodles`; weitere Styles können über `config/avatar.php` freigeschaltet werden
- Profilbild-Generator mit visueller Komponenten-Auswahl, generischem Style-/Seed-/Config-Speichermodell, Style-Wechsel und komponentenbezogenen Farbfeldern pro Style - Profilbild-Generator mit visueller Komponenten-Auswahl, generischem Style-/Seed-/Config-Speichermodell, Style-Wechsel und komponentenbezogenen Farbfeldern pro Style; im Modal bleiben Kopfbereich und Komponentenleiste fixiert, waehrend nur die Variantenliste scrollt
- jedes gespeicherte Profilbild wird als lokale Benutzer-SVG unter `public/assets/avatars/users/ptk-<userId>.svg` abgelegt - jedes gespeicherte Profilbild wird als lokale Benutzer-SVG unter `public/assets/avatars/users/ptk-<userId>.svg` abgelegt
- `config/avatar.php` enthaelt jetzt pro Style auch explizite Beispielpaletten, Farbgruppen pro Komponente und Beispielprofile als Einbindungsreferenz - `config/avatar.php` enthaelt jetzt pro Style auch explizite Beispielpaletten, Farbgruppen pro Komponente und Beispielprofile als Einbindungsreferenz
- Consent-Manager für Analyse und externe Dienste - Consent-Manager für Analyse und externe Dienste

110
partials/landing/account/dashboard.php
View File

@@ -359,6 +359,61 @@ $sectionLinks = [
<strong><?= htmlspecialchars((string)($component['label'] ?? $field), ENT_QUOTES) ?></strong> <strong><?= htmlspecialchars((string)($component['label'] ?? $field), ENT_QUOTES) ?></strong>
<span class="muted small">Gesamtes Profilbild zur sicheren Vorschau</span> <span class="muted small">Gesamtes Profilbild zur sicheren Vorschau</span>
</div> </div>
<?php $componentColors = $component['colors'] ?? []; ?>
<?php if ($componentColors): ?>
<div class="avatar-component-colors">
<?php foreach ($componentColors as $colorField => $colorMeta): ?>
<?php
$colorValue = (string)($colorMeta['value'] ?? '');
$colorDefault = '#000000';
$samples = is_array($colorMeta['samples'] ?? null) ? $colorMeta['samples'] : [];
?>
<div class="avatar-color-control">
<label class="avatar-color-control__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="avatar-color-control__row">
<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) ?>"
class="avatar-color-control__picker"
>
<button
class="btn ghost avatar-color-control__reset"
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="avatar-color-control__samples">
<?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="background: <?= htmlspecialchars((string)$sampleColor, ENT_QUOTES) ?>;"
></button>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
<div class="avatar-component-grid"> <div class="avatar-component-grid">
<?php foreach (($component['options'] ?? []) as $choice): ?> <?php foreach (($component['options'] ?? []) as $choice): ?>
<label class="avatar-component-card"> <label class="avatar-component-card">
@@ -384,61 +439,6 @@ $sectionLinks = [
</label> </label>
<?php endforeach; ?> <?php endforeach; ?>
</div> </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> </section>
<?php endforeach; ?> <?php endforeach; ?>
</div> </div>

33
public/assets/css/app.css
View File

@@ -248,25 +248,38 @@ body {
.profile-avatar-panel__content h3 { margin: 0 0 8px; } .profile-avatar-panel__content h3 { margin: 0 0 8px; }
.profile-avatar-panel__content p { margin: 0 0 14px; } .profile-avatar-panel__content p { margin: 0 0 14px; }
.avatar-builder { height: 100%; min-height: 0; } .avatar-builder { height: 100%; min-height: 0; }
.avatar-builder__shell { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 18px; } .avatar-builder__shell { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; }
.avatar-builder__top { display: grid; gap: 16px; padding: 18px; background: linear-gradient(180deg, #fffdfa, #f8f4ec); border: 1px solid var(--color-border); border-radius: 18px; } .avatar-builder__top { display: grid; gap: 14px; padding: 14px; background: linear-gradient(180deg, #fffdfa, #f8f4ec); border: 1px solid var(--color-border); border-radius: 18px; }
.avatar-builder__hero { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 22px; align-items: center; } .avatar-builder__hero { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 22px; align-items: center; }
.avatar-builder__hero-preview { display: flex; align-items: center; justify-content: center; } .avatar-builder__hero-preview { display: flex; align-items: center; justify-content: center; }
.avatar-builder__hero-content { display: grid; gap: 14px; min-width: 0; } .avatar-builder__hero-content { display: grid; gap: 14px; min-width: 0; }
.avatar-builder__actions { justify-content: flex-start; } .avatar-builder__actions { justify-content: flex-start; }
.avatar-builder__body { min-height: 0; overflow: auto; padding-right: 6px; display: grid; gap: 16px; } .avatar-builder__body { min-height: 0; overflow: hidden; display: grid; }
.avatar-component-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .avatar-style-group { min-height: 0; display: none; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
.avatar-style-group.is-active { display: grid; }
.avatar-component-nav { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 2px 0 10px; background: linear-gradient(180deg, rgba(246, 240, 228, 0.98), rgba(246, 240, 228, 0.92)); border-bottom: 1px solid rgba(196, 169, 120, 0.25); }
.avatar-component-nav__button { border: 1px solid var(--color-border); background: #fff; color: var(--color-text); border-radius: 999px; padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .avatar-component-nav__button { border: 1px solid var(--color-border); background: #fff; color: var(--color-text); border-radius: 999px; padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.avatar-component-nav__button.is-active { background: var(--color-primary); color: var(--color-primary-contrast); border-color: var(--color-primary); } .avatar-component-nav__button.is-active { background: var(--color-primary); color: var(--color-primary-contrast); border-color: var(--color-primary); }
.avatar-loader { width: 100%; display: grid; gap: 8px; padding: 12px 14px; background: rgba(255,255,255,0.72); border: 1px solid var(--color-border); border-radius: 14px; } .avatar-loader { width: 100%; display: grid; gap: 8px; padding: 12px 14px; background: rgba(255,255,255,0.72); border: 1px solid var(--color-border); border-radius: 14px; }
.avatar-loader__bar { width: 100%; height: 10px; overflow: hidden; border-radius: 999px; background: #ece2d4; } .avatar-loader__bar { width: 100%; height: 10px; overflow: hidden; border-radius: 999px; background: #ece2d4; }
.avatar-loader__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #37485a, #68819a); transition: width 180ms ease; } .avatar-loader__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #37485a, #68819a); transition: width 180ms ease; }
.avatar-loader__meta { display: flex; justify-content: space-between; gap: 10px; align-items: center; } .avatar-loader__meta { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.avatar-component-panels { width: 100%; display: grid; } .avatar-component-panels { width: 100%; min-height: 0; display: grid; }
.avatar-component-panel { display: none; width: 100%; gap: 10px; } .avatar-component-panel { display: none; width: 100%; min-height: 0; gap: 12px; grid-template-rows: auto auto minmax(0, 1fr); }
.avatar-component-panel.is-active { display: grid; } .avatar-component-panel.is-active { display: grid; }
.avatar-component-panel__head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .avatar-component-panel__head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.avatar-component-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .avatar-component-colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; padding: 10px 12px; background: rgba(255,255,255,0.72); border: 1px solid rgba(196, 169, 120, 0.35); border-radius: 16px; }
.avatar-color-control { display: grid; gap: 6px; align-content: start; }
.avatar-color-control__label { font-size: 12px; font-weight: 700; color: var(--color-text); }
.avatar-color-control__row { display: flex; align-items: center; gap: 8px; }
.avatar-color-control__picker { width: 38px; min-width: 38px; height: 38px; padding: 0; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; cursor: pointer; }
.avatar-color-control__picker::-webkit-color-swatch-wrapper { padding: 4px; }
.avatar-color-control__picker::-webkit-color-swatch { border: 0; border-radius: 7px; }
.avatar-color-control__picker::-moz-color-swatch { border: 0; border-radius: 7px; }
.avatar-color-control__reset { min-height: 38px; padding: 8px 12px; font-size: 12px; }
.avatar-color-control__samples { display: flex; flex-wrap: wrap; gap: 6px; }
.avatar-color-sample { width: 24px; height: 24px; border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
.avatar-component-grid { min-height: 0; overflow: auto; padding-right: 4px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-content: start; }
.avatar-component-card { position: relative; display: grid; gap: 6px; padding: 8px; background: #fff; border: 1px solid var(--color-border); border-radius: 16px; cursor: pointer; } .avatar-component-card { position: relative; display: grid; gap: 6px; padding: 8px; background: #fff; border: 1px solid var(--color-border); border-radius: 16px; cursor: pointer; }
.avatar-component-card input { position: absolute; opacity: 0; pointer-events: none; } .avatar-component-card input { position: absolute; opacity: 0; pointer-events: none; }
.avatar-component-card__thumb { display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #f7efe6, #f0e4d7); border: 1px solid rgba(74, 52, 38, 0.08); } .avatar-component-card__thumb { display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #f7efe6, #f0e4d7); border: 1px solid rgba(74, 52, 38, 0.08); }
@@ -274,7 +287,7 @@ body {
.avatar-component-card__label { font-size: 12px; font-weight: 700; color: var(--color-text); text-align: center; } .avatar-component-card__label { font-size: 12px; font-weight: 700; color: var(--color-text); text-align: center; }
.avatar-component-card:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(52,72,90,0.14); } .avatar-component-card:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(52,72,90,0.14); }
@media (max-width: 980px){ .avatar-component-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 980px){ .avatar-component-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px){ .avatar-builder__hero { grid-template-columns: 1fr; } .avatar-builder__actions { justify-content: center; } .avatar-component-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px){ .avatar-builder__hero { grid-template-columns: 1fr; } .avatar-builder__actions { justify-content: center; } .avatar-component-colors { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .avatar-component-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.avatar-swatch-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; } .avatar-swatch-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.avatar-swatch { display: grid; grid-template-columns: 20px 18px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 14px; background: #fff; cursor: pointer; } .avatar-swatch { display: grid; grid-template-columns: 20px 18px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 14px; background: #fff; cursor: pointer; }
.avatar-swatch__color { width: 18px; height: 18px; border-radius: 999px; background: var(--swatch-color); border: 1px solid rgba(0,0,0,0.12); } .avatar-swatch__color { width: 18px; height: 18px; border-radius: 999px; background: var(--swatch-color); border: 1px solid rgba(0,0,0,0.12); }
@@ -393,10 +406,10 @@ body {
.form-grid.single { grid-template-columns: 1fr; } .form-grid.single { grid-template-columns: 1fr; }
@media (max-width: 900px){ .auth-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } } @media (max-width: 900px){ .auth-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } }
.modal { position: fixed; inset: 0; display: none; align-items: flex-start; justify-content: center; padding: 70px 16px 24px; background: rgba(0,0,0,0.4); z-index: 200; overflow: auto; } .modal { position: fixed; inset: 0; display: none; align-items: flex-start; justify-content: center; padding: 16px 8px; background: rgba(0,0,0,0.4); z-index: 200; overflow: auto; }
.modal.open { display: flex; } .modal.open { display: flex; }
.modal .panel { background:#fff; border-radius: var(--radius-md); padding: 16px; box-shadow: 0 18px 50px rgba(0,0,0,0.25); width: min(960px, 100%); } .modal .panel { background:#fff; border-radius: var(--radius-md); padding: 16px; box-shadow: 0 18px 50px rgba(0,0,0,0.25); width: min(960px, 100%); }
.modal .panel--avatar { width: min(1120px, 100%); height: calc(100vh - 96px); max-height: calc(100vh - 96px); overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); } .modal .panel--avatar { width: min(1240px, 100%); height: calc(100vh - 32px); max-height: calc(100vh - 32px); padding: 12px; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.dash-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; } .dash-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.dash-grid-2 { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; } .dash-grid-2 { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }

2
public/assets/js/app.js
View File

@@ -938,7 +938,7 @@ document.addEventListener('DOMContentLoaded', () => {
if (!panel || !field) return; if (!panel || !field) return;
const hidden = panel.querySelector(`[data-avatar-color-input="${field}"]`); const hidden = panel.querySelector(`[data-avatar-color-input="${field}"]`);
const picker = panel.querySelector(`[data-avatar-color-picker="${field}"]`); const picker = panel.querySelector(`[data-avatar-color-picker="${field}"]`);
const defaultValue = picker?.getAttribute('data-avatar-color-default') || '#c4a484'; const defaultValue = picker?.getAttribute('data-avatar-color-default') || '#000000';
if (hidden) { if (hidden) {
hidden.value = ''; hidden.value = '';
} }