ycxc

public/assets/css/app.css

@@ -52,7 +52,7 @@ body {
 .profile-menu { position: relative; }
 .profile-menu__trigger { display: inline-flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border: 1px solid var(--color-border); border-radius: 999px; background: #fff; color: var(--color-text); cursor: pointer; font: inherit; }
 .profile-menu__trigger:hover { border-color: var(--color-primary); }
-.profile-menu__avatar { width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--color-primary-contrast); font-weight: 700; }
+.profile-menu__avatar { width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
 .profile-menu__name { font-weight: 600; }
 .profile-menu__dropdown { position: absolute; top: calc(100% + 10px); right: 0; min-width: 220px; padding: 10px; display: none; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
 .profile-menu.is-open .profile-menu__dropdown { display: grid; gap: 4px; }
@@ -114,6 +114,66 @@ body {
 .step { text-align: left; }
 .step__icon { width: 34px; height:34px; border-radius: 10px; background: var(--color-accent); color: #fff; display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom: 8px; }
 
+.pkt-avatar { --avatar-size: 52px; --avatar-skin: #efc1a3; --avatar-hair: #5b392b; --avatar-eye: #5f4431; position: relative; display: inline-block; width: var(--avatar-size); height: var(--avatar-size); border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #fbf6ee, #efe2d2); border: 1px solid rgba(74, 52, 38, 0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.65); }
+.pkt-avatar--nav { --avatar-size: 34px; border-radius: 999px; }
+.pkt-avatar--forum-list { --avatar-size: 42px; border-radius: 14px; }
+.pkt-avatar--forum { --avatar-size: 52px; border-radius: 16px; }
+.pkt-avatar--xl { --avatar-size: 120px; border-radius: 28px; }
+.pkt-avatar--xxl { --avatar-size: 168px; border-radius: 36px; }
+.pkt-avatar__bg,
+.pkt-avatar__shirt,
+.pkt-avatar__neck,
+.pkt-avatar__ears,
+.pkt-avatar__head,
+.pkt-avatar__hair,
+.pkt-avatar__eye,
+.pkt-avatar__nose,
+.pkt-avatar__mouth,
+.pkt-avatar__beard,
+.pkt-avatar__glasses { position: absolute; display: block; }
+.pkt-avatar__bg { inset: 0; background: radial-gradient(circle at top, rgba(255,255,255,0.82), rgba(255,255,255,0) 48%); }
+.pkt-avatar__shirt { left: 16%; bottom: -4%; width: 68%; height: 34%; border-radius: 50% 50% 18% 18%; background: linear-gradient(180deg, #607d94, #44586b); }
+.pkt-avatar__neck { left: 43%; bottom: 24%; width: 14%; height: 16%; border-radius: 10px; background: var(--avatar-skin); }
+.pkt-avatar__ears { left: 20%; top: 37%; width: 60%; height: 18%; }
+.pkt-avatar__ears::before,
+.pkt-avatar__ears::after { content: ""; position: absolute; top: 0; width: 12%; height: 100%; border-radius: 999px; background: var(--avatar-skin); }
+.pkt-avatar__ears::before { left: -6%; }
+.pkt-avatar__ears::after { right: -6%; }
+.pkt-avatar__head { left: 22%; top: 19%; width: 56%; height: 54%; background: var(--avatar-skin); }
+.pkt-avatar--head-round .pkt-avatar__head { border-radius: 48% 48% 42% 42%; }
+.pkt-avatar--head-oval .pkt-avatar__head { border-radius: 44% 44% 46% 46%; transform: scaleX(0.94); }
+.pkt-avatar--head-square .pkt-avatar__head { border-radius: 26% 26% 32% 32%; }
+.pkt-avatar__hair { left: 18%; top: 10%; width: 64%; height: 27%; background: var(--avatar-hair); border-radius: 52% 52% 26% 26%; }
+.pkt-avatar__hair::before,
+.pkt-avatar__hair::after { content: ""; position: absolute; background: var(--avatar-hair); }
+.pkt-avatar--hair-short .pkt-avatar__hair::before { left: 10%; right: 10%; top: 52%; height: 36%; border-radius: 0 0 40% 40%; }
+.pkt-avatar--hair-parted .pkt-avatar__hair::before { left: 8%; width: 36%; top: 54%; height: 38%; border-radius: 0 0 46% 42%; }
+.pkt-avatar--hair-parted .pkt-avatar__hair::after { right: 8%; width: 28%; top: 44%; height: 44%; border-radius: 0 0 40% 40%; }
+.pkt-avatar--hair-curly .pkt-avatar__hair { height: 30%; border-radius: 52% 52% 38% 38%; }
+.pkt-avatar--hair-curly .pkt-avatar__hair::before,
+.pkt-avatar--hair-curly .pkt-avatar__hair::after { top: 56%; width: 26%; height: 44%; border-radius: 50%; }
+.pkt-avatar--hair-curly .pkt-avatar__hair::before { left: 8%; }
+.pkt-avatar--hair-curly .pkt-avatar__hair::after { right: 8%; }
+.pkt-avatar--hair-bald .pkt-avatar__hair { display: none; }
+.pkt-avatar__eye { top: 42%; width: 10%; height: 10%; border-radius: 999px; background: var(--avatar-eye); box-shadow: inset 0 0 0 3px rgba(255,255,255,0.65); }
+.pkt-avatar__eye--left { left: 35%; }
+.pkt-avatar__eye--right { right: 35%; }
+.pkt-avatar__nose { left: 47%; top: 48%; width: 6%; height: 12%; border-radius: 999px; background: rgba(126, 85, 54, 0.18); }
+.pkt-avatar__mouth { left: 40%; top: 60%; width: 20%; height: 8%; border-bottom: 2px solid rgba(103, 66, 43, 0.55); border-radius: 0 0 999px 999px; }
+.pkt-avatar__beard { left: 27%; top: 56%; width: 46%; background: var(--avatar-hair); display: none; }
+.pkt-avatar--beard-mustache .pkt-avatar__beard { display: block; height: 7%; top: 57%; border-radius: 999px 999px 18px 18px; }
+.pkt-avatar--beard-short .pkt-avatar__beard { display: block; height: 18%; top: 56%; border-radius: 14px 14px 38% 38%; }
+.pkt-avatar--beard-full .pkt-avatar__beard { display: block; height: 24%; top: 54%; border-radius: 16px 16px 42% 42%; }
+.pkt-avatar__glasses { inset: 0; display: none; }
+.pkt-avatar__glasses::before,
+.pkt-avatar__glasses::after { content: ""; position: absolute; top: 40%; width: 18%; height: 12%; border: 2px solid rgba(53, 53, 53, 0.75); background: rgba(255,255,255,0.18); }
+.pkt-avatar__glasses::before { left: 28%; border-radius: 999px; }
+.pkt-avatar__glasses::after { right: 28%; border-radius: 999px; box-shadow: -24px 0 0 -22px rgba(53,53,53,0.75); }
+.pkt-avatar--glasses-round .pkt-avatar__glasses,
+.pkt-avatar--glasses-square .pkt-avatar__glasses { display: block; }
+.pkt-avatar--glasses-square .pkt-avatar__glasses::before,
+.pkt-avatar--glasses-square .pkt-avatar__glasses::after { border-radius: 6px; }
+
 .faq details { border:1px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px 12px; background: #fff; }
 .faq summary { cursor:pointer; font-weight: 600; }
 .faq p { margin: 8px 0 0 0; color: var(--color-muted); }
@@ -225,6 +285,17 @@ body {
 .account-kv div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; }
 .account-kv dt { font-weight: 700; color: var(--color-muted); }
 .account-kv dd { margin: 0; }
+.profile-avatar-panel { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 22px; align-items: center; margin-bottom: 24px; padding: 20px; background: linear-gradient(135deg, #fffdfa, #f7f0e6); border: 1px solid var(--color-border); border-radius: 18px; }
+.profile-avatar-panel__preview { display: flex; justify-content: center; }
+.profile-avatar-panel__content h3 { margin: 0 0 8px; }
+.profile-avatar-panel__content p { margin: 0 0 14px; }
+.avatar-builder__layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
+.avatar-builder__preview { position: sticky; top: 0; display: grid; justify-items: center; gap: 12px; padding: 18px; background: linear-gradient(180deg, #fffdfa, #f8f4ec); border: 1px solid var(--color-border); border-radius: 18px; }
+.avatar-builder__controls { display: grid; gap: 18px; }
+.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__color { width: 18px; height: 18px; border-radius: 999px; background: var(--swatch-color); border: 1px solid rgba(0,0,0,0.12); }
+.avatar-swatch input { margin: 0; }
 .settings-help { display: grid; gap: 14px; }
 .settings-help details { border: 1px solid var(--color-border); border-radius: 12px; padding: 12px 14px; background: #fff; }
 .settings-help summary { cursor: pointer; font-weight: 700; }
@@ -233,7 +304,8 @@ body {
 .forum-search__row { display: flex; gap: 10px; }
 .forum-list__header { display: grid; grid-template-columns: minmax(0, 1fr) 120px 220px; gap: 16px; padding: 14px 24px; background: #f8f4ec; color: var(--color-muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .35px; }
 .forum-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 220px; gap: 16px; padding: 20px 24px; border-top: 1px solid var(--color-border); align-items: start; }
-.forum-row__topic { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
+.forum-row__topic { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
+.forum-row__avatar { display: flex; align-items: flex-start; justify-content: center; }
 .forum-row__icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--color-accent-soft); font-size: 18px; }
 .forum-row__topic h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.2; }
 .forum-row__topic h3 a:hover { color: var(--color-primary); }
@@ -253,7 +325,7 @@ body {
 .forum-post + .forum-post { margin-top: 14px; }
 .forum-post--lead { margin-bottom: 24px; }
 .forum-post__author { display: grid; gap: 8px; align-content: start; padding: 22px 18px; background: #f8f4ec; border-right: 1px solid var(--color-border); }
-.forum-post__avatar { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--color-primary); color: #fff; font-size: 22px; font-weight: 700; }
+.forum-post__avatar { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }
 .forum-post__author strong { font-size: 17px; }
 .forum-post__author span { color: var(--color-muted); font-size: 14px; }
 .forum-post__body { padding: 20px 24px; }
@@ -299,6 +371,9 @@ body {
   .forum-row__activity { grid-auto-flow: column; justify-content: start; gap: 10px; align-items: baseline; }
   .forum-post { grid-template-columns: 1fr; }
   .forum-post__author { border-right: 0; border-bottom: 1px solid var(--color-border); }
+  .profile-avatar-panel,
+  .avatar-builder__layout { grid-template-columns: 1fr; }
+  .avatar-builder__preview { position: static; }
 }
 
 @media (max-width: 720px){

public/assets/js/app.js

@@ -726,6 +726,51 @@ document.addEventListener('DOMContentLoaded', () => {
   });
   document.addEventListener('pkt:open-consent', openConsentModal);
 
+  const avatarPreviewClassPrefixes = [
+    'pkt-avatar--head-',
+    'pkt-avatar--hair-',
+    'pkt-avatar--beard-',
+    'pkt-avatar--glasses-',
+  ];
+
+  const updateAvatarPreview = (form) => {
+    const preview = form.querySelector('[data-avatar-preview] .pkt-avatar');
+    if (!preview) return;
+
+    const readValue = (field) => {
+      const checked = form.querySelector(`[data-avatar-field="${field}"]:checked`);
+      if (checked) return checked.value;
+      const input = form.querySelector(`[data-avatar-field="${field}"]`);
+      return input ? input.value : '';
+    };
+    const readColor = (field) => {
+      const checked = form.querySelector(`[data-avatar-field="${field}"]:checked`);
+      return checked ? checked.getAttribute('data-avatar-color') || '' : '';
+    };
+
+    avatarPreviewClassPrefixes.forEach((prefix) => {
+      Array.from(preview.classList)
+        .filter((className) => className.startsWith(prefix))
+        .forEach((className) => preview.classList.remove(className));
+    });
+
+    preview.classList.add(`pkt-avatar--head-${readValue('avatar_head_shape')}`);
+    preview.classList.add(`pkt-avatar--hair-${readValue('avatar_hair_style')}`);
+    preview.classList.add(`pkt-avatar--beard-${readValue('avatar_beard_style')}`);
+    preview.classList.add(`pkt-avatar--glasses-${readValue('avatar_glasses_style')}`);
+    preview.style.setProperty('--avatar-skin', readColor('avatar_skin_tone'));
+    preview.style.setProperty('--avatar-hair', readColor('avatar_hair_color'));
+    preview.style.setProperty('--avatar-eye', readColor('avatar_eye_color'));
+  };
+
+  document.querySelectorAll('[data-avatar-builder]').forEach((form) => {
+    updateAvatarPreview(form);
+    form.querySelectorAll('[data-avatar-field]').forEach((field) => {
+      field.addEventListener('change', () => updateAvatarPreview(form));
+      field.addEventListener('input', () => updateAvatarPreview(form));
+    });
+  });
+
   document.querySelectorAll('[data-nav-events]').forEach(link => {
     link.addEventListener('click', async () => {
       if (window.location.pathname === '/' && window.location.hash === '#events') {