From 03c7fb30675dd0ed163980fd3de9064ffb1c51cd Mon Sep 17 00:00:00 2001 From: Niek Rabelink Date: Thu, 10 Sep 2026 13:27:36 +0200 Subject: [PATCH] feat(profile): update avatar selection with category filters and enhanced UI - Replaced standard avatar titles with more engaging names. - Added category filter buttons for avatars: Fun & Emojis, Cyber & Bots, Modern Personas, Adventurer & Heroes. - Refactored avatar loading logic to use an array of avatar presets with associated categories and names. - Enhanced button styles for better user interaction feedback. - Implemented JavaScript function to filter displayed avatars based on selected category. --- assets/avatars/avatar-01.svg | 19 +------- assets/avatars/avatar-02.svg | 23 +--------- assets/avatars/avatar-03.svg | 23 +--------- assets/avatars/avatar-04.svg | 21 +-------- assets/avatars/avatar-05.svg | 19 +------- assets/avatars/avatar-06.svg | 26 +---------- assets/avatars/avatar-07.svg | 25 +---------- assets/avatars/avatar-08.svg | 21 +-------- assets/avatars/avatar-09.svg | 22 +--------- assets/avatars/avatar-10.svg | 23 +--------- assets/avatars/avatar-11.svg | 20 +-------- assets/avatars/avatar-12.svg | 24 +---------- assets/avatars/avatar-13.svg | 19 +------- assets/avatars/avatar-14.svg | 28 +----------- assets/avatars/avatar-15.svg | 23 +--------- assets/avatars/avatar-16.svg | 21 +-------- assets/avatars/avatar-17.svg | 19 +------- assets/avatars/avatar-18.svg | 26 +---------- assets/avatars/avatar-19.svg | 20 +-------- assets/avatars/avatar-20.svg | 21 +-------- assets/avatars/avatar-21.svg | 27 +----------- assets/avatars/avatar-22.svg | 23 +--------- assets/avatars/avatar-23.svg | 20 +-------- assets/avatars/avatar-24.svg | 24 +---------- profile.php | 84 ++++++++++++++++++++++++++++++++---- 25 files changed, 99 insertions(+), 522 deletions(-) diff --git a/assets/avatars/avatar-01.svg b/assets/avatars/avatar-01.svg index 224692b..28023ef 100644 --- a/assets/avatars/avatar-01.svg +++ b/assets/avatars/avatar-01.svg @@ -1,18 +1 @@ - - - - - - - - - - - - - - - - - - +Fun Emoji SetDavis Uchehttps://www.figma.com/community/file/968125295144990435https://creativecommons.org/licenses/by/4.0/Remix of „Fun Emoji Set” (https://www.figma.com/community/file/968125295144990435) by „Davis Uche”, licensed under „CC BY 4.0” (https://creativecommons.org/licenses/by/4.0/) \ No newline at end of file diff --git a/assets/avatars/avatar-02.svg b/assets/avatars/avatar-02.svg index d4b9bf2..7b6f5b3 100644 --- a/assets/avatars/avatar-02.svg +++ b/assets/avatars/avatar-02.svg @@ -1,22 +1 @@ - - - - - - - - - - - - - - - - - - - - - - +Fun Emoji SetDavis Uchehttps://www.figma.com/community/file/968125295144990435https://creativecommons.org/licenses/by/4.0/Remix of „Fun Emoji Set” (https://www.figma.com/community/file/968125295144990435) by „Davis Uche”, licensed under „CC BY 4.0” (https://creativecommons.org/licenses/by/4.0/) \ No newline at end of file diff --git a/assets/avatars/avatar-03.svg b/assets/avatars/avatar-03.svg index 684089b..fbc8907 100644 --- a/assets/avatars/avatar-03.svg +++ b/assets/avatars/avatar-03.svg @@ -1,22 +1 @@ - - - - - - - - - - - - - - - - - - - - - - +Fun Emoji SetDavis Uchehttps://www.figma.com/community/file/968125295144990435https://creativecommons.org/licenses/by/4.0/Remix of „Fun Emoji Set” (https://www.figma.com/community/file/968125295144990435) by „Davis Uche”, licensed under „CC BY 4.0” (https://creativecommons.org/licenses/by/4.0/) \ No newline at end of file diff --git a/assets/avatars/avatar-04.svg b/assets/avatars/avatar-04.svg index 8fc7bf5..13d17b4 100644 --- a/assets/avatars/avatar-04.svg +++ b/assets/avatars/avatar-04.svg @@ -1,20 +1 @@ - - - - - - - - - - - - - - - - - - - - +Fun Emoji SetDavis Uchehttps://www.figma.com/community/file/968125295144990435https://creativecommons.org/licenses/by/4.0/Remix of „Fun Emoji Set” (https://www.figma.com/community/file/968125295144990435) by „Davis Uche”, licensed under „CC BY 4.0” (https://creativecommons.org/licenses/by/4.0/) \ No newline at end of file diff --git a/assets/avatars/avatar-05.svg b/assets/avatars/avatar-05.svg index 5acb03f..434ce20 100644 --- a/assets/avatars/avatar-05.svg +++ b/assets/avatars/avatar-05.svg @@ -1,18 +1 @@ - - - - - - - - - - - - - - - - - - +Fun Emoji SetDavis Uchehttps://www.figma.com/community/file/968125295144990435https://creativecommons.org/licenses/by/4.0/Remix of „Fun Emoji Set” (https://www.figma.com/community/file/968125295144990435) by „Davis Uche”, licensed under „CC BY 4.0” (https://creativecommons.org/licenses/by/4.0/) \ No newline at end of file diff --git a/assets/avatars/avatar-06.svg b/assets/avatars/avatar-06.svg index 66025a4..bd1e23b 100644 --- a/assets/avatars/avatar-06.svg +++ b/assets/avatars/avatar-06.svg @@ -1,25 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - +Fun Emoji SetDavis Uchehttps://www.figma.com/community/file/968125295144990435https://creativecommons.org/licenses/by/4.0/Remix of „Fun Emoji Set” (https://www.figma.com/community/file/968125295144990435) by „Davis Uche”, licensed under „CC BY 4.0” (https://creativecommons.org/licenses/by/4.0/) \ No newline at end of file diff --git a/assets/avatars/avatar-07.svg b/assets/avatars/avatar-07.svg index 8ca3bcc..729227c 100644 --- a/assets/avatars/avatar-07.svg +++ b/assets/avatars/avatar-07.svg @@ -1,24 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - +BotttsPablo Stanleyhttps://bottts.com/https://bottts.com/Remix of „Bottts” (https://bottts.com/) by „Pablo Stanley”, licensed under „Free for personal and commercial use” (https://bottts.com/) \ No newline at end of file diff --git a/assets/avatars/avatar-08.svg b/assets/avatars/avatar-08.svg index 8cd0bb9..91a2ad5 100644 --- a/assets/avatars/avatar-08.svg +++ b/assets/avatars/avatar-08.svg @@ -1,20 +1 @@ - - - - - - - - - - - - - - - - - - - - +BotttsPablo Stanleyhttps://bottts.com/https://bottts.com/Remix of „Bottts” (https://bottts.com/) by „Pablo Stanley”, licensed under „Free for personal and commercial use” (https://bottts.com/) \ No newline at end of file diff --git a/assets/avatars/avatar-09.svg b/assets/avatars/avatar-09.svg index 8a4a163..7fbf00b 100644 --- a/assets/avatars/avatar-09.svg +++ b/assets/avatars/avatar-09.svg @@ -1,21 +1 @@ - - - - - - - - - - - - - - - - - - - - - +BotttsPablo Stanleyhttps://bottts.com/https://bottts.com/Remix of „Bottts” (https://bottts.com/) by „Pablo Stanley”, licensed under „Free for personal and commercial use” (https://bottts.com/) \ No newline at end of file diff --git a/assets/avatars/avatar-10.svg b/assets/avatars/avatar-10.svg index 81bb3b2..2ff9383 100644 --- a/assets/avatars/avatar-10.svg +++ b/assets/avatars/avatar-10.svg @@ -1,22 +1 @@ - - - - - - - - - - - - - - - - - - - - - - +BotttsPablo Stanleyhttps://bottts.com/https://bottts.com/Remix of „Bottts” (https://bottts.com/) by „Pablo Stanley”, licensed under „Free for personal and commercial use” (https://bottts.com/) \ No newline at end of file diff --git a/assets/avatars/avatar-11.svg b/assets/avatars/avatar-11.svg index fe7cb1d..701f6c1 100644 --- a/assets/avatars/avatar-11.svg +++ b/assets/avatars/avatar-11.svg @@ -1,19 +1 @@ - - - - - - - - - - - - - - - - - - - +BotttsPablo Stanleyhttps://bottts.com/https://bottts.com/Remix of „Bottts” (https://bottts.com/) by „Pablo Stanley”, licensed under „Free for personal and commercial use” (https://bottts.com/) \ No newline at end of file diff --git a/assets/avatars/avatar-12.svg b/assets/avatars/avatar-12.svg index 5deec67..383bfda 100644 --- a/assets/avatars/avatar-12.svg +++ b/assets/avatars/avatar-12.svg @@ -1,23 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - +BotttsPablo Stanleyhttps://bottts.com/https://bottts.com/Remix of „Bottts” (https://bottts.com/) by „Pablo Stanley”, licensed under „Free for personal and commercial use” (https://bottts.com/) \ No newline at end of file diff --git a/assets/avatars/avatar-13.svg b/assets/avatars/avatar-13.svg index 87ed632..008d9ab 100644 --- a/assets/avatars/avatar-13.svg +++ b/assets/avatars/avatar-13.svg @@ -1,18 +1 @@ - - - - - - - - - - - - - - - - - - +LoreleiLisa Wischofskyhttps://www.figma.com/community/file/1198749693280469639https://creativecommons.org/publicdomain/zero/1.0/Remix of „Lorelei” (https://www.figma.com/community/file/1198749693280469639) by „Lisa Wischofsky”, licensed under „CC0 1.0” (https://creativecommons.org/publicdomain/zero/1.0/) \ No newline at end of file diff --git a/assets/avatars/avatar-14.svg b/assets/avatars/avatar-14.svg index e99eab5..cf19283 100644 --- a/assets/avatars/avatar-14.svg +++ b/assets/avatars/avatar-14.svg @@ -1,27 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - +LoreleiLisa Wischofskyhttps://www.figma.com/community/file/1198749693280469639https://creativecommons.org/publicdomain/zero/1.0/Remix of „Lorelei” (https://www.figma.com/community/file/1198749693280469639) by „Lisa Wischofsky”, licensed under „CC0 1.0” (https://creativecommons.org/publicdomain/zero/1.0/) \ No newline at end of file diff --git a/assets/avatars/avatar-15.svg b/assets/avatars/avatar-15.svg index 2366585..e5fbd9c 100644 --- a/assets/avatars/avatar-15.svg +++ b/assets/avatars/avatar-15.svg @@ -1,22 +1 @@ - - - - - - - - - - - - - - - - - - - - - - +LoreleiLisa Wischofskyhttps://www.figma.com/community/file/1198749693280469639https://creativecommons.org/publicdomain/zero/1.0/Remix of „Lorelei” (https://www.figma.com/community/file/1198749693280469639) by „Lisa Wischofsky”, licensed under „CC0 1.0” (https://creativecommons.org/publicdomain/zero/1.0/) \ No newline at end of file diff --git a/assets/avatars/avatar-16.svg b/assets/avatars/avatar-16.svg index 60c5cc8..fe030f4 100644 --- a/assets/avatars/avatar-16.svg +++ b/assets/avatars/avatar-16.svg @@ -1,20 +1 @@ - - - - - - - - - - - - - - - - - - - - +LoreleiLisa Wischofskyhttps://www.figma.com/community/file/1198749693280469639https://creativecommons.org/publicdomain/zero/1.0/Remix of „Lorelei” (https://www.figma.com/community/file/1198749693280469639) by „Lisa Wischofsky”, licensed under „CC0 1.0” (https://creativecommons.org/publicdomain/zero/1.0/) \ No newline at end of file diff --git a/assets/avatars/avatar-17.svg b/assets/avatars/avatar-17.svg index 096d5a2..20d57c5 100644 --- a/assets/avatars/avatar-17.svg +++ b/assets/avatars/avatar-17.svg @@ -1,18 +1 @@ - - - - - - - - - - - - - - - - - - +LoreleiLisa Wischofskyhttps://www.figma.com/community/file/1198749693280469639https://creativecommons.org/publicdomain/zero/1.0/Remix of „Lorelei” (https://www.figma.com/community/file/1198749693280469639) by „Lisa Wischofsky”, licensed under „CC0 1.0” (https://creativecommons.org/publicdomain/zero/1.0/) \ No newline at end of file diff --git a/assets/avatars/avatar-18.svg b/assets/avatars/avatar-18.svg index dc64b6d..1bacdcb 100644 --- a/assets/avatars/avatar-18.svg +++ b/assets/avatars/avatar-18.svg @@ -1,25 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - +LoreleiLisa Wischofskyhttps://www.figma.com/community/file/1198749693280469639https://creativecommons.org/publicdomain/zero/1.0/Remix of „Lorelei” (https://www.figma.com/community/file/1198749693280469639) by „Lisa Wischofsky”, licensed under „CC0 1.0” (https://creativecommons.org/publicdomain/zero/1.0/) \ No newline at end of file diff --git a/assets/avatars/avatar-19.svg b/assets/avatars/avatar-19.svg index a4011a1..b57c691 100644 --- a/assets/avatars/avatar-19.svg +++ b/assets/avatars/avatar-19.svg @@ -1,19 +1 @@ - - - - - - - - - - - - - - - - - - - +AdventurerLisa Wischofskyhttps://www.figma.com/community/file/1184595184137881796https://creativecommons.org/licenses/by/4.0/Remix of „Adventurer” (https://www.figma.com/community/file/1184595184137881796) by „Lisa Wischofsky”, licensed under „CC BY 4.0” (https://creativecommons.org/licenses/by/4.0/) \ No newline at end of file diff --git a/assets/avatars/avatar-20.svg b/assets/avatars/avatar-20.svg index eb8b3df..1c097b7 100644 --- a/assets/avatars/avatar-20.svg +++ b/assets/avatars/avatar-20.svg @@ -1,20 +1 @@ - - - - - - - - - - - - - - - - - - - - +AdventurerLisa Wischofskyhttps://www.figma.com/community/file/1184595184137881796https://creativecommons.org/licenses/by/4.0/Remix of „Adventurer” (https://www.figma.com/community/file/1184595184137881796) by „Lisa Wischofsky”, licensed under „CC BY 4.0” (https://creativecommons.org/licenses/by/4.0/) \ No newline at end of file diff --git a/assets/avatars/avatar-21.svg b/assets/avatars/avatar-21.svg index 73d2cbd..7a74353 100644 --- a/assets/avatars/avatar-21.svg +++ b/assets/avatars/avatar-21.svg @@ -1,26 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - +AdventurerLisa Wischofskyhttps://www.figma.com/community/file/1184595184137881796https://creativecommons.org/licenses/by/4.0/Remix of „Adventurer” (https://www.figma.com/community/file/1184595184137881796) by „Lisa Wischofsky”, licensed under „CC BY 4.0” (https://creativecommons.org/licenses/by/4.0/) \ No newline at end of file diff --git a/assets/avatars/avatar-22.svg b/assets/avatars/avatar-22.svg index 4760bb4..9284f71 100644 --- a/assets/avatars/avatar-22.svg +++ b/assets/avatars/avatar-22.svg @@ -1,22 +1 @@ - - - - - - - - - - - - - - - - - - - - - - +AdventurerLisa Wischofskyhttps://www.figma.com/community/file/1184595184137881796https://creativecommons.org/licenses/by/4.0/Remix of „Adventurer” (https://www.figma.com/community/file/1184595184137881796) by „Lisa Wischofsky”, licensed under „CC BY 4.0” (https://creativecommons.org/licenses/by/4.0/) \ No newline at end of file diff --git a/assets/avatars/avatar-23.svg b/assets/avatars/avatar-23.svg index 7fe9aac..b96c026 100644 --- a/assets/avatars/avatar-23.svg +++ b/assets/avatars/avatar-23.svg @@ -1,19 +1 @@ - - - - - - - - - - - - - - - - - - - +AdventurerLisa Wischofskyhttps://www.figma.com/community/file/1184595184137881796https://creativecommons.org/licenses/by/4.0/Remix of „Adventurer” (https://www.figma.com/community/file/1184595184137881796) by „Lisa Wischofsky”, licensed under „CC BY 4.0” (https://creativecommons.org/licenses/by/4.0/) \ No newline at end of file diff --git a/assets/avatars/avatar-24.svg b/assets/avatars/avatar-24.svg index 25bd777..85c7ace 100644 --- a/assets/avatars/avatar-24.svg +++ b/assets/avatars/avatar-24.svg @@ -1,23 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - +AdventurerLisa Wischofskyhttps://www.figma.com/community/file/1184595184137881796https://creativecommons.org/licenses/by/4.0/Remix of „Adventurer” (https://www.figma.com/community/file/1184595184137881796) by „Lisa Wischofsky”, licensed under „CC BY 4.0” (https://creativecommons.org/licenses/by/4.0/) \ No newline at end of file diff --git a/profile.php b/profile.php index 0002967..db03d06 100644 --- a/profile.php +++ b/profile.php @@ -535,26 +535,71 @@ require_once __DIR__ . '/includes/header.php';
-
+

- Kies een Karakter (24 Mini Avatars) + Kies een Karakter (24 Flitsende Avatars)

Klik om direct toe te passen
+ +
+ + + + + +
+
'avatar-01.svg', 'cat' => 'emoji', 'name' => 'Cool Star (Zonnebril)'], + ['file' => 'avatar-02.svg', 'cat' => 'emoji', 'name' => 'Party Champion'], + ['file' => 'avatar-03.svg', 'cat' => 'emoji', 'name' => 'Celebration Vibe'], + ['file' => 'avatar-04.svg', 'cat' => 'emoji', 'name' => 'Laser Eyes Energy'], + ['file' => 'avatar-05.svg', 'cat' => 'emoji', 'name' => 'Sunny Smiles'], + ['file' => 'avatar-06.svg', 'cat' => 'emoji', 'name' => 'Fire Heart'], + ['file' => 'avatar-07.svg', 'cat' => 'bots', 'name' => 'Cyber Tron'], + ['file' => 'avatar-08.svg', 'cat' => 'bots', 'name' => 'Aero Bot'], + ['file' => 'avatar-09.svg', 'cat' => 'bots', 'name' => 'Neon Volt'], + ['file' => 'avatar-10.svg', 'cat' => 'bots', 'name' => 'Pixel Pulse'], + ['file' => 'avatar-11.svg', 'cat' => 'bots', 'name' => 'Quantum AI'], + ['file' => 'avatar-12.svg', 'cat' => 'bots', 'name' => 'Robo Racer'], + ['file' => 'avatar-13.svg', 'cat' => 'personas', 'name' => 'Alex (Hipster)'], + ['file' => 'avatar-14.svg', 'cat' => 'personas', 'name' => 'Maya (Tech Lead)'], + ['file' => 'avatar-15.svg', 'cat' => 'personas', 'name' => 'Lucas (Designer)'], + ['file' => 'avatar-16.svg', 'cat' => 'personas', 'name' => 'Elena (Developer)'], + ['file' => 'avatar-17.svg', 'cat' => 'personas', 'name' => 'Sam (Creative)'], + ['file' => 'avatar-18.svg', 'cat' => 'personas', 'name' => 'Zoe (Founder)'], + ['file' => 'avatar-19.svg', 'cat' => 'heroes', 'name' => 'Jack (Adventurer)'], + ['file' => 'avatar-20.svg', 'cat' => 'heroes', 'name' => 'Luna (Heroine)'], + ['file' => 'avatar-21.svg', 'cat' => 'heroes', 'name' => 'Oliver (Explorer)'], + ['file' => 'avatar-22.svg', 'cat' => 'heroes', 'name' => 'Mia (Rebel)'], + ['file' => 'avatar-23.svg', 'cat' => 'heroes', 'name' => 'Leo (Cosmic)'], + ['file' => 'avatar-24.svg', 'cat' => 'heroes', 'name' => 'Nova (Cyberpunk)'], + ]; + + foreach ($avatarPresets as $av): + $avatarPath = "/assets/avatars/{$av['file']}"; $isSelected = ($userProfile['avatar_url'] === $avatarPath); ?> -
+ -
- +
@@ -1100,6 +1145,27 @@ function previewUploadAvatar(input) { } } +function filterAvatarCategory(category) { + const items = document.querySelectorAll('.avatar-item'); + items.forEach(el => { + const cat = el.getAttribute('data-category'); + if (category === 'all' || cat === category) { + el.classList.remove('hidden'); + } else { + el.classList.add('hidden'); + } + }); + + const btns = document.querySelectorAll('.av-cat-btn'); + btns.forEach(btn => { + btn.className = 'av-cat-btn px-2.5 py-1 rounded-lg text-[11px] font-semibold transition cursor-pointer bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300'; + }); + const activeBtn = document.getElementById('avCatBtn-' + category); + if (activeBtn) { + activeBtn.className = 'av-cat-btn px-2.5 py-1 rounded-lg text-[11px] font-bold transition cursor-pointer bg-indigo-600 text-white shadow-xs'; + } +} + // Sync banner status met browser permissie & activeer actuele thema kaart document.addEventListener('DOMContentLoaded', () => { // Initialiseer geselecteerde thema-kaart