avatar

public/assets/css/app.css

@@ -114,87 +114,84 @@ 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; --avatar-hat: #38475f; --avatar-outfit: #5f7387; position: relative; display: inline-block; width: var(--avatar-size); height: var(--avatar-size); border-radius: 20px; overflow: hidden; background: radial-gradient(circle at 28% 22%, #ffffff, #f5ece2 34%, #dfd0c0 100%); border: 1px solid rgba(74, 52, 38, 0.14); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 10px 22px rgba(39, 28, 21, 0.08); }
+.pkt-avatar { --avatar-size: 52px; --avatar-skin: #efc1a3; --avatar-hair: #5b392b; --avatar-eye: #5f4431; --avatar-hat: #38475f; --avatar-outfit: #5f7387; position: relative; display: inline-block; width: var(--avatar-size); height: var(--avatar-size); border-radius: 20px; overflow: hidden; background: #f7efe6; border: 1px solid rgba(74, 52, 38, 0.12); box-shadow: 0 10px 24px rgba(39, 28, 21, 0.08); }
 .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__shadow,
-.pkt-avatar__hoodie,
+.pkt-avatar__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
+.pkt-avatar__svg { display: block; width: 100%; height: 100%; }
+.pkt-avatar__bg { fill: url(#none); }
+.pkt-avatar__bg { fill: #f7efe6; }
+.pkt-avatar__shadow { fill: rgba(70, 52, 40, 0.10); }
+.pkt-avatar__outfit { fill: color-mix(in srgb, var(--avatar-outfit) 88%, black 12%); }
+.pkt-avatar__outfit-detail { fill: none; stroke: rgba(255,255,255,0.45); stroke-width: 3.5; stroke-linecap: round; }
 .pkt-avatar__neck,
-.pkt-avatar__ears,
-.pkt-avatar__head,
-.pkt-avatar__cheek,
-.pkt-avatar__hair,
-.pkt-avatar__hat,
-.pkt-avatar__eye,
-.pkt-avatar__brow,
-.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 30% 16%, rgba(255,255,255,0.92), rgba(255,255,255,0.04) 42%), radial-gradient(circle at 78% 82%, rgba(93,70,48,0.08), rgba(93,70,48,0) 34%); }
-.pkt-avatar__shadow { left: 18%; top: 18%; width: 64%; height: 62%; border-radius: 44% 44% 42% 42%; background: radial-gradient(circle at 52% 56%, rgba(44, 29, 21, 0.20), rgba(44, 29, 21, 0) 68%); filter: blur(calc(var(--avatar-size) * 0.045)); }
-.pkt-avatar__hoodie { left: 7%; bottom: -4%; width: 86%; height: 38%; border-radius: 42% 42% 16% 16%; background: linear-gradient(180deg, color-mix(in srgb, var(--avatar-outfit) 82%, white 18%), color-mix(in srgb, var(--avatar-outfit) 72%, black 28%)); }
-.pkt-avatar__hoodie::before { content: ""; position: absolute; left: 29%; top: -18%; width: 42%; height: 54%; border-radius: 50% 50% 42% 42%; border: calc(var(--avatar-size) * 0.035) solid color-mix(in srgb, var(--avatar-outfit) 78%, white 22%); border-bottom: 0; opacity: .95; }
-.pkt-avatar__hoodie::after { content: ""; position: absolute; left: 47%; top: 12%; width: 6%; height: 20%; border-radius: 999px; background: rgba(255,255,255,0.42); box-shadow: calc(var(--avatar-size) * -0.08) 0 0 rgba(255,255,255,0.42); }
-.pkt-avatar__neck { left: 43%; bottom: 24%; width: 14%; height: 16%; border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--avatar-skin) 90%, white 10%), color-mix(in srgb, var(--avatar-skin) 80%, black 20%)); }
-.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: linear-gradient(180deg, color-mix(in srgb, var(--avatar-skin) 90%, white 10%), color-mix(in srgb, var(--avatar-skin) 78%, black 22%)); }
-.pkt-avatar__ears::before { left: -6%; }
-.pkt-avatar__ears::after { right: -6%; }
-.pkt-avatar__head { left: 22%; top: 19%; width: 56%; height: 54%; background: radial-gradient(circle at 44% 26%, color-mix(in srgb, var(--avatar-skin) 88%, white 12%) 0, color-mix(in srgb, var(--avatar-skin) 92%, white 8%) 35%, color-mix(in srgb, var(--avatar-skin) 84%, black 16%) 100%); box-shadow: inset 0 calc(var(--avatar-size) * -0.02) calc(var(--avatar-size) * 0.03) rgba(255,255,255,0.22), inset 0 calc(var(--avatar-size) * -0.04) calc(var(--avatar-size) * 0.08) rgba(118, 75, 47, 0.12); }
-.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__cheek { top: 54%; width: 11%; height: 6%; border-radius: 999px; background: rgba(194, 109, 97, 0.16); filter: blur(calc(var(--avatar-size) * 0.018)); }
-.pkt-avatar__cheek--left { left: 29%; }
-.pkt-avatar__cheek--right { right: 29%; }
-.pkt-avatar__hair { left: 17%; top: 8%; width: 66%; height: 30%; background: linear-gradient(180deg, color-mix(in srgb, var(--avatar-hair) 92%, white 8%), color-mix(in srgb, var(--avatar-hair) 72%, black 28%)); border-radius: 52% 52% 26% 26%; box-shadow: inset 0 calc(var(--avatar-size) * -0.015) calc(var(--avatar-size) * 0.04) rgba(255,255,255,0.14); }
-.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-fade .pkt-avatar__hair::before { left: 12%; right: 12%; top: 48%; height: 28%; border-radius: 0 0 38% 38%; }
-.pkt-avatar--hair-fade .pkt-avatar__hair::after { left: 6%; right: 6%; top: 66%; height: 12%; border-radius: 0 0 50% 50%; opacity: .72; }
-.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-waves .pkt-avatar__hair::before { left: 7%; width: 34%; top: 48%; height: 42%; border-radius: 48% 42% 38% 42%; }
-.pkt-avatar--hair-waves .pkt-avatar__hair::after { right: 5%; width: 38%; top: 44%; height: 46%; border-radius: 46% 46% 40% 44%; }
-.pkt-avatar--hair-bald .pkt-avatar__hair { display: none; }
-.pkt-avatar__hat { left: 11%; top: 7%; width: 78%; height: 26%; display: none; background: linear-gradient(180deg, color-mix(in srgb, var(--avatar-hat) 86%, white 14%), color-mix(in srgb, var(--avatar-hat) 70%, black 30%)); box-shadow: inset 0 calc(var(--avatar-size) * -0.015) calc(var(--avatar-size) * 0.035) rgba(255,255,255,0.14); }
-.pkt-avatar--hat-beanie .pkt-avatar__hat { display: block; border-radius: 48% 48% 22% 22%; }
-.pkt-avatar--hat-beanie .pkt-avatar__hat::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32%; border-radius: 12px; background: color-mix(in srgb, var(--avatar-hat) 88%, black 12%); }
-.pkt-avatar--hat-cap .pkt-avatar__hat { display: block; top: 9%; height: 22%; border-radius: 52% 52% 18% 18%; }
-.pkt-avatar--hat-cap .pkt-avatar__hat::before { content: ""; position: absolute; left: 42%; top: 68%; width: 42%; height: 24%; border-radius: 0 999px 999px 999px; background: color-mix(in srgb, var(--avatar-hat) 82%, black 18%); transform: skewX(-18deg); }
-.pkt-avatar__eye { top: 44%; width: 9%; height: 9%; border-radius: 999px; background: radial-gradient(circle at 42% 42%, rgba(255,255,255,0.85) 0 18%, var(--avatar-eye) 22% 100%); box-shadow: 0 calc(var(--avatar-size) * 0.01) 0 rgba(39,27,19,0.14); }
-.pkt-avatar__eye--left { left: 35%; }
-.pkt-avatar__eye--right { right: 35%; }
-.pkt-avatar__brow { top: 38%; width: 14%; height: 4%; background: color-mix(in srgb, var(--avatar-hair) 85%, black 15%); border-radius: 999px; opacity: .82; }
-.pkt-avatar__brow--left { left: 32%; transform: rotate(-8deg); }
-.pkt-avatar__brow--right { right: 32%; transform: rotate(8deg); }
-.pkt-avatar__nose { left: 47%; top: 49%; width: 6%; height: 12%; border-radius: 999px; background: linear-gradient(180deg, rgba(126, 85, 54, 0.08), rgba(126, 85, 54, 0.26)); }
-.pkt-avatar__mouth { left: 39%; top: 62%; width: 22%; height: 8%; border-bottom: 2px solid rgba(103, 66, 43, 0.56); border-radius: 0 0 999px 999px; }
-.pkt-avatar__beard { left: 26%; top: 55%; width: 48%; background: linear-gradient(180deg, color-mix(in srgb, var(--avatar-hair) 88%, white 12%), color-mix(in srgb, var(--avatar-hair) 70%, black 30%)); 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: 19%; top: 56%; border-radius: 16px 16px 40% 40%; }
-.pkt-avatar--beard-full .pkt-avatar__beard { display: block; height: 25%; top: 54%; border-radius: 18px 18px 44% 44%; }
-.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.78); 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: calc(var(--avatar-size) * -0.145) 0 0 calc(var(--avatar-size) * -0.132) rgba(53,53,53,0.78); }
-.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; }
+.pkt-avatar__ear,
+.pkt-avatar__face { fill: var(--avatar-skin); }
+.pkt-avatar__face-shade { fill: rgba(88, 58, 35, 0.10); }
+.pkt-avatar__cheek { fill: rgba(204, 112, 100, 0.12); }
+.pkt-avatar__hair-base,
+.pkt-avatar__hair-short,
+.pkt-avatar__hair-fade,
+.pkt-avatar__hair-parted,
+.pkt-avatar__hair-curly,
+.pkt-avatar__hair-waves,
+.pkt-avatar__beard-mustache,
+.pkt-avatar__beard-short,
+.pkt-avatar__beard-full,
+.pkt-avatar__brow { fill: var(--avatar-hair); stroke: none; }
+.pkt-avatar__hair-base { opacity: .15; }
+.pkt-avatar__hair-short,
+.pkt-avatar__hair-fade,
+.pkt-avatar__hair-parted,
+.pkt-avatar__hair-curly,
+.pkt-avatar__hair-waves { display: none; }
+.pkt-avatar--hair-short .pkt-avatar__hair-short,
+.pkt-avatar--hair-fade .pkt-avatar__hair-fade,
+.pkt-avatar--hair-parted .pkt-avatar__hair-parted,
+.pkt-avatar--hair-curly .pkt-avatar__hair-curly,
+.pkt-avatar--hair-waves .pkt-avatar__hair-waves { display: block; }
+.pkt-avatar--hair-bald .pkt-avatar__hair-base,
+.pkt-avatar--hair-bald .pkt-avatar__hair-short,
+.pkt-avatar--hair-bald .pkt-avatar__hair-fade,
+.pkt-avatar--hair-bald .pkt-avatar__hair-parted,
+.pkt-avatar--hair-bald .pkt-avatar__hair-curly,
+.pkt-avatar--hair-bald .pkt-avatar__hair-waves { display: none; }
+.pkt-avatar__hat-beanie,
+.pkt-avatar__hat-beanie-rib,
+.pkt-avatar__hat-cap,
+.pkt-avatar__hat-cap-brim { display: none; fill: var(--avatar-hat); }
+.pkt-avatar__hat-beanie-rib,
+.pkt-avatar__hat-cap-brim { fill: color-mix(in srgb, var(--avatar-hat) 86%, black 14%); }
+.pkt-avatar--hat-beanie .pkt-avatar__hat-beanie,
+.pkt-avatar--hat-beanie .pkt-avatar__hat-beanie-rib,
+.pkt-avatar--hat-cap .pkt-avatar__hat-cap,
+.pkt-avatar--hat-cap .pkt-avatar__hat-cap-brim { display: block; }
+.pkt-avatar__brow { fill: none; stroke: color-mix(in srgb, var(--avatar-hair) 92%, black 8%); stroke-width: 4; stroke-linecap: round; opacity: .9; }
+.pkt-avatar__eye-shell { fill: #fff; }
+.pkt-avatar__eye { fill: var(--avatar-eye); }
+.pkt-avatar__eye-highlight { fill: rgba(255,255,255,0.9); }
+.pkt-avatar__nose { fill: none; stroke: rgba(113, 76, 49, 0.18); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
+.pkt-avatar__mouth { fill: none; stroke: rgba(102, 66, 42, 0.7); stroke-width: 3; stroke-linecap: round; }
+.pkt-avatar__beard-mustache,
+.pkt-avatar__beard-short,
+.pkt-avatar__beard-full { display: none; }
+.pkt-avatar--beard-mustache .pkt-avatar__beard-mustache,
+.pkt-avatar--beard-short .pkt-avatar__beard-short,
+.pkt-avatar--beard-full .pkt-avatar__beard-full { display: block; }
+.pkt-avatar__glasses-round-left,
+.pkt-avatar__glasses-round-right,
+.pkt-avatar__glasses-square-left,
+.pkt-avatar__glasses-square-right,
+.pkt-avatar__glasses-bridge { display: none; fill: none; stroke: rgba(41, 41, 41, 0.78); stroke-width: 2.8; stroke-linecap: round; }
+.pkt-avatar--glasses-round .pkt-avatar__glasses-round-left,
+.pkt-avatar--glasses-round .pkt-avatar__glasses-round-right,
+.pkt-avatar--glasses-round .pkt-avatar__glasses-bridge { display: block; }
+.pkt-avatar--glasses-square .pkt-avatar__glasses-square-left,
+.pkt-avatar--glasses-square .pkt-avatar__glasses-square-right,
+.pkt-avatar--glasses-square .pkt-avatar__glasses-bridge { display: block; }
 
 .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; }
@@ -314,6 +311,14 @@ body {
 .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-preset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 12px; }
+.avatar-preset-card { display: grid; gap: 8px; align-content: start; padding: 10px; border: 1px solid var(--color-border); border-radius: 16px; background: #fff; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
+.avatar-preset-card:hover { border-color: var(--color-primary); box-shadow: 0 10px 20px rgba(41, 31, 22, 0.08); transform: translateY(-1px); }
+.avatar-preset-card input { position: absolute; opacity: 0; pointer-events: none; }
+.avatar-preset-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-preset-card__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
+.avatar-preset-card__label { font-size: 13px; font-weight: 700; color: var(--color-text); }
+.avatar-preset-card:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(52,72,90,0.14); }
 .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); }

public/assets/js/app.js

@@ -738,6 +738,16 @@ document.addEventListener('DOMContentLoaded', () => {
     const preview = form.querySelector('[data-avatar-preview] .pkt-avatar');
     if (!preview) return;
 
+    const presetChoice = form.querySelector('[data-avatar-preset-option]:checked');
+    if (presetChoice) {
+      const img = preview.querySelector('.pkt-avatar__img');
+      const src = presetChoice.getAttribute('data-avatar-src') || '';
+      if (img && src) {
+        img.src = src;
+      }
+      return;
+    }
+
     const readValue = (field) => {
       const checked = form.querySelector(`[data-avatar-field="${field}"]:checked`);
       if (checked) return checked.value;
@@ -769,7 +779,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   document.querySelectorAll('[data-avatar-builder]').forEach((form) => {
     updateAvatarPreview(form);
-    form.querySelectorAll('[data-avatar-field]').forEach((field) => {
+    form.querySelectorAll('[data-avatar-field], [data-avatar-preset-option]').forEach((field) => {
       field.addEventListener('change', () => updateAvatarPreview(form));
       field.addEventListener('input', () => updateAvatarPreview(form));
     });