feat(avatar): implement avatar upload processing and validation, update user interface for avatar display

users.php

@@ -216,7 +216,10 @@ require_once __DIR__ . '/includes/header.php';
                                 <div class="flex items-center space-x-2.5">
                                     <div class="w-8 h-8 rounded-xl bg-gradient-to-tr from-indigo-600 to-sky-500 p-0.5 flex-shrink-0 overflow-hidden shadow-2xs">
                                         <?php if (!empty($u['avatar_url'])): ?>
-                                            <img src="<?= htmlspecialchars($u['avatar_url']) ?>" alt="Avatar" class="w-full h-full rounded-[10px] object-cover bg-white dark:bg-slate-900">
+                                            <img src="<?= htmlspecialchars($u['avatar_url']) ?>" alt="Avatar" class="w-full h-full rounded-[10px] object-cover bg-white dark:bg-slate-900" onerror="this.classList.add('hidden'); if(this.nextElementSibling) this.nextElementSibling.classList.remove('hidden');">
+                                            <div class="hidden w-full h-full rounded-[10px] bg-white dark:bg-slate-900 flex items-center justify-center font-bold text-xs text-indigo-600 dark:text-indigo-400 uppercase">
+                                                <?= strtoupper(substr($u['name'], 0, 1)) ?>
+                                            </div>
                                         <?php else: ?>
                                             <div class="w-full h-full rounded-[10px] bg-white dark:bg-slate-900 flex items-center justify-center font-bold text-xs text-indigo-600 dark:text-indigo-400 uppercase">
                                                 <?= strtoupper(substr($u['name'], 0, 1)) ?>