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

ycyxcx
All checks were successful
Deploy / deploy (push) Successful in 1m13s
Details

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2026-07-24 21:43:37 +02:00
parent 9a5f1b1a5d
commit 0956a984cb
31 changed files with 326 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/assets/avatars/layers/modern/beard/full.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M55 89c5 7 14 11 25 11 12 0 20-4 25-11-1 23-10 36-25 39-16-3-24-16-25-39z" fill="var(--avatar-hair)"/>
<path d="M61 94c5 5 11 8 19 8 7 0 14-3 19-8-3 11-8 18-19 21-11-3-16-10-19-21z" fill="rgba(255,255,255,0.08)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 316 B

3
public/assets/avatars/layers/modern/beard/mustache.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M64 97c4-4 10-5 16-5 7 0 12 1 16 5-4 1-7 4-10 8-2-2-4-3-6-3s-4 1-6 3c-3-4-6-7-10-8z" fill="var(--avatar-hair)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 213 B

4
public/assets/avatars/layers/modern/beard/short.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M60 93c4 5 10 8 20 8s16-3 20-8c0 15-6 25-20 28-14-3-20-13-20-28z" fill="var(--avatar-hair)"/>
<path d="M66 95c4 3 8 4 14 4 5 0 10-1 14-4-2 7-6 12-14 14-8-2-12-7-14-14z" fill="rgba(255,255,255,0.08)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 303 B

14
public/assets/avatars/layers/modern/features/default.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<ellipse cx="60" cy="92" rx="8" ry="4" fill="rgba(204,112,100,0.11)"/>
<ellipse cx="100" cy="92" rx="8" ry="4" fill="rgba(204,112,100,0.11)"/>
<path d="M56 70c5-3 13-4 20-1" stroke="color-mix(in srgb, var(--avatar-hair) 92%, black 8%)" stroke-width="4" stroke-linecap="round" fill="none"/>
<path d="M84 69c7-3 15-2 20 2" stroke="color-mix(in srgb, var(--avatar-hair) 92%, black 8%)" stroke-width="4" stroke-linecap="round" fill="none"/>
<ellipse cx="66" cy="79" rx="8" ry="5" fill="#fff"/>
<ellipse cx="94" cy="79" rx="8" ry="5" fill="#fff"/>
<circle cx="66" cy="79" r="3.6" fill="var(--avatar-eye)"/>
<circle cx="94" cy="79" r="3.6" fill="var(--avatar-eye)"/>
<circle cx="65" cy="78" r="1.1" fill="rgba(255,255,255,0.92)"/>
<circle cx="93" cy="78" r="1.1" fill="rgba(255,255,255,0.92)"/>
<path d="M80 81c-2 5-3 9-3 15 0 3 2 5 5 5" stroke="rgba(111,76,49,0.18)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<path d="M69 103c7 4 15 4 22 0" stroke="rgba(98,64,42,0.72)" stroke-width="3" stroke-linecap="round" fill="none"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

5
public/assets/avatars/layers/modern/glasses/round.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect x="54" y="70" width="22" height="16" rx="8" fill="none" stroke="rgba(41,41,41,0.82)" stroke-width="2.8"/>
<rect x="84" y="70" width="22" height="16" rx="8" fill="none" stroke="rgba(41,41,41,0.82)" stroke-width="2.8"/>
<path d="M76 78h8" stroke="rgba(41,41,41,0.82)" stroke-width="2.8" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 411 B

5
public/assets/avatars/layers/modern/glasses/square.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect x="54" y="70" width="22" height="16" rx="4" fill="none" stroke="rgba(41,41,41,0.82)" stroke-width="2.8"/>
<rect x="84" y="70" width="22" height="16" rx="4" fill="none" stroke="rgba(41,41,41,0.82)" stroke-width="2.8"/>
<path d="M76 78h8" stroke="rgba(41,41,41,0.82)" stroke-width="2.8" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 411 B

7
public/assets/avatars/layers/modern/hair/curly.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M38 71c4-17 10-28 18-35 7-6 15-9 24-9 12 0 22 4 30 12 8 7 12 18 13 32-5-3-9-5-13-6-4-1-7 4-11 4-4 0-6-5-10-5-4 0-6 5-10 5-4 0-6-5-10-5-5 0-9 4-13 4-4 0-5-4-8-4-4 1-7 3-10 7z" fill="var(--avatar-hair)"/>
<circle cx="58" cy="43" r="9" fill="var(--avatar-hair)"/>
<circle cx="74" cy="37" r="10" fill="var(--avatar-hair)"/>
<circle cx="90" cy="38" r="11" fill="var(--avatar-hair)"/>
<circle cx="106" cy="45" r="9" fill="var(--avatar-hair)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 546 B

4
public/assets/avatars/layers/modern/hair/fade.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M44 69c4-22 18-35 36-35 18 0 32 12 36 35-8-6-15-9-22-11-9-2-19-2-28 1-7 2-13 5-22 10z" fill="var(--avatar-hair)"/>
<path d="M50 71c8-6 18-8 30-8 12 0 22 2 30 8-7 4-16 6-30 6s-23-2-30-6z" fill="rgba(0,0,0,0.08)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 315 B

4
public/assets/avatars/layers/modern/hair/parted.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M43 67c3-17 14-30 27-37 14-7 31-6 43 7 6 7 9 16 9 28-8-8-12-12-18-15-10-5-21-4-28 4-4-6-9-10-16-10-7 0-12 3-17 8z" fill="var(--avatar-hair)"/>
<path d="M60 37c5-5 14-8 22-8 14 0 25 6 31 16-7-4-13-6-20-7-10-2-19 0-33 11z" fill="rgba(255,255,255,0.12)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 355 B

4
public/assets/avatars/layers/modern/hair/short.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M42 69c2-20 14-33 28-39 8-3 18-4 27-1 11 4 20 14 23 38-8-6-16-10-23-12-10-3-20-2-29 2-9 3-16 8-26 12z" fill="var(--avatar-hair)"/>
<path d="M60 35c11-6 29-5 41 1-7-1-14-1-22 1-9 1-14 4-19 8z" fill="rgba(255,255,255,0.12)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 326 B

4
public/assets/avatars/layers/modern/hair/waves.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M41 70c3-16 10-27 20-34 8-5 17-8 28-8 16 0 29 11 33 40-6-6-11-9-17-12-4-2-8-2-12-3-5 0-7 6-12 6-4 0-8-7-13-7-10 0-18 6-27 18z" fill="var(--avatar-hair)"/>
<path d="M54 42c6-5 14-8 22-8 14 0 26 8 31 18-6-4-11-6-19-7-13-1-22 0-34-3z" fill="rgba(255,255,255,0.12)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 366 B

4
public/assets/avatars/layers/modern/hat/beanie.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M36 63c2-23 18-39 44-39 24 0 40 14 44 39H36z" fill="var(--avatar-hat)"/>
<path d="M38 61h84c0 11-6 18-14 18H52c-8 0-14-7-14-18z" fill="color-mix(in srgb, var(--avatar-hat) 84%, black 16%)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 293 B

4
public/assets/avatars/layers/modern/hat/cap.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M40 63c5-19 18-30 40-30 23 0 35 10 40 30H40z" fill="var(--avatar-hat)"/>
<path d="M80 63c15 0 31 5 44 14-7 4-16 7-26 8-18 2-28 1-39-4 3-8 9-18 21-18z" fill="color-mix(in srgb, var(--avatar-hat) 82%, black 18%)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 315 B

8
public/assets/avatars/layers/modern/head/oval.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M68 101h24v21c0 8-5 14-12 14s-12-6-12-14v-21z" fill="color-mix(in srgb, var(--avatar-skin) 90%, #6e452f 10%)"/>
<path d="M49 79c0-8 5-13 10-13v25c-5 0-10-5-10-12z" fill="var(--avatar-skin)"/>
<path d="M111 66c5 0 10 5 10 13 0 7-5 12-10 12V66z" fill="var(--avatar-skin)"/>
<path d="M80 25c-22 0-37 18-37 43v20c0 28 16 46 37 46s37-18 37-46V68c0-25-15-43-37-43z" fill="var(--avatar-skin)"/>
<path d="M52 92c4 21 14 35 28 39V48c-10 1-19 7-24 17-7 12-7 27-4 27z" fill="rgba(255,255,255,0.12)"/>
<path d="M108 92c-4 21-14 35-28 39V48c10 1 19 7 24 17 7 12 7 27 4 27z" fill="rgba(120,72,42,0.08)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 701 B

8
public/assets/avatars/layers/modern/head/round.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M68 100h24v22c0 7-5 13-12 13s-12-6-12-13v-22z" fill="color-mix(in srgb, var(--avatar-skin) 90%, #6e452f 10%)"/>
<path d="M48 78c0-8 5-13 11-13v26c-6 0-11-5-11-13z" fill="var(--avatar-skin)"/>
<path d="M112 65c6 0 11 5 11 13s-5 13-11 13V65z" fill="var(--avatar-skin)"/>
<path d="M80 27c-25 0-40 18-40 43v18c0 28 18 46 40 46s40-18 40-46V70c0-25-15-43-40-43z" fill="var(--avatar-skin)"/>
<path d="M49 91c3 22 15 38 31 41V50c-12 1-23 8-29 19-6 11-6 22-2 22v0z" fill="rgba(255,255,255,0.12)"/>
<path d="M111 91c-3 22-15 38-31 41V50c12 1 23 8 29 19 6 11 6 22 2 22v0z" fill="rgba(120,72,42,0.08)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 702 B

7
public/assets/avatars/layers/modern/head/square.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M68 100h24v22c0 7-5 13-12 13s-12-6-12-13v-22z" fill="color-mix(in srgb, var(--avatar-skin) 90%, #6e452f 10%)"/>
<path d="M48 77c0-8 5-13 10-13v26c-5 0-10-5-10-13z" fill="var(--avatar-skin)"/>
<path d="M112 64c5 0 10 5 10 13s-5 13-10 13V64z" fill="var(--avatar-skin)"/>
<path d="M80 27c-24 0-39 18-39 41v20c0 27 17 45 39 45s39-18 39-45V68c0-23-15-41-39-41z" fill="var(--avatar-skin)"/>
<path d="M53 112c5 12 15 21 27 21s22-9 27-21c-6 7-15 12-27 12s-21-5-27-12z" fill="rgba(120,72,42,0.08)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 599 B

4
public/assets/avatars/layers/modern/outfit/crew.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M24 160c3-23 18-36 56-36s53 13 56 36H24z" fill="var(--avatar-outfit)"/>
<path d="M62 126c4 7 10 11 18 11s14-4 18-11c-5-2-11-3-18-3s-13 1-18 3z" fill="color-mix(in srgb, var(--avatar-outfit) 76%, black 24%)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 311 B

5
public/assets/avatars/layers/modern/outfit/hoodie.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M22 160c3-24 19-38 58-38s55 14 58 38H22z" fill="var(--avatar-outfit)"/>
<path d="M56 126c6 11 13 18 24 18s18-7 24-18c-6-4-15-7-24-7s-18 3-24 7z" fill="color-mix(in srgb, var(--avatar-outfit) 78%, black 22%)"/>
<path d="M73 126v12M87 126v12" stroke="rgba(255,255,255,0.46)" stroke-width="3" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 419 B

5
public/assets/avatars/layers/modern/outfit/polo.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M24 160c4-23 19-37 56-37s52 14 56 37H24z" fill="var(--avatar-outfit)"/>
<path d="M61 124l19 15 19-15" fill="color-mix(in srgb, var(--avatar-outfit) 70%, white 30%)"/>
<path d="M80 123v18" stroke="rgba(255,255,255,0.4)" stroke-width="3" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 365 B

4
public/assets/avatars/layers/modern/outfit/tee.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M26 160c3-22 18-35 54-35s51 13 54 35H26z" fill="var(--avatar-outfit)"/>
<path d="M58 126c5 9 12 14 22 14s17-5 22-14c-7-3-15-4-22-4s-15 1-22 4z" fill="color-mix(in srgb, var(--avatar-outfit) 80%, black 20%)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 311 B

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

@@ -114,84 +114,22 @@ 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: #f7efe6; border: 1px solid rgba(74, 52, 38, 0.12); box-shadow: 0 10px 24px 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: radial-gradient(circle at 50% 22%, #fffdfa 0%, #f7efe6 62%, #ecdac6 100%); border: 1px solid rgba(74, 52, 38, 0.12); box-shadow: 0 10px 24px rgba(39, 28, 21, 0.08); isolation: isolate; }
.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__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__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; }
.pkt-avatar--layered::before { content: ""; position: absolute; inset: auto 8% -8% 8%; height: 28%; border-radius: 50%; background: radial-gradient(circle at center, rgba(74, 52, 38, 0.16), transparent 70%); filter: blur(10px); z-index: 0; pointer-events: none; }
.pkt-avatar__layer { position: absolute; inset: 0; display: block; z-index: 1; pointer-events: none; }
.pkt-avatar__layer--outfit { z-index: 1; }
.pkt-avatar__layer--head { z-index: 2; }
.pkt-avatar__layer--hair { z-index: 3; }
.pkt-avatar__layer--hat { z-index: 4; }
.pkt-avatar__layer--features { z-index: 5; }
.pkt-avatar__layer--beard { z-index: 6; }
.pkt-avatar__layer--glasses { z-index: 7; }
.pkt-avatar__layer svg { display: block; width: 100%; height: 100%; }
.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; }
@@ -311,18 +249,11 @@ 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); }
.avatar-swatch input { margin: 0; }
.avatar-swatch:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(52,72,90,0.14); }
.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; }

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

@@ -732,22 +732,13 @@ document.addEventListener('DOMContentLoaded', () => {
'pkt-avatar--beard-',
'pkt-avatar--glasses-',
'pkt-avatar--hat-',
'pkt-avatar--outfit-',
];
const updateAvatarPreview = (form) => {
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;
@@ -770,6 +761,7 @@ document.addEventListener('DOMContentLoaded', () => {
preview.classList.add(`pkt-avatar--beard-${readValue('avatar_beard_style')}`);
preview.classList.add(`pkt-avatar--glasses-${readValue('avatar_glasses_style')}`);
preview.classList.add(`pkt-avatar--hat-${readValue('avatar_hat_style')}`);
preview.classList.add(`pkt-avatar--outfit-${readValue('avatar_outfit_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'));
@@ -779,7 +771,7 @@ document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('[data-avatar-builder]').forEach((form) => {
updateAvatarPreview(form);
form.querySelectorAll('[data-avatar-field], [data-avatar-preset-option]').forEach((field) => {
form.querySelectorAll('[data-avatar-field]').forEach((field) => {
field.addEventListener('change', () => updateAvatarPreview(form));
field.addEventListener('input', () => updateAvatarPreview(form));
});