Add user profile management system

[Copilot]

Implements client-side user profile management with localStorage persistence, validation, and accessibility features.

Implementation

• View/Edit Modes: Toggle between display and edit states with form-based updates
• Persistence: localStorage with error handling for quota/privacy mode failures
• Validation: Email regex, URL format checks, required field enforcement
• UX: Toast notifications (success/error) instead of blocking alerts
• Accessibility: ARIA attributes for mode transitions, dynamic alt text for avatars
• Error Recovery: Fallback to default profile on corrupted data or failed image loads

Key Details

// Validation improvements
isValidEmail(email) {
    // Stricter regex requiring proper TLD
    const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return emailRegex.test(email);
}

// Graceful localStorage handling
try {
    localStorage.setItem('userProfile', JSON.stringify(profile));
} catch (error) {
    this.showErrorMessage('Failed to save profile. Please try again.');
    return;
}

UI

View Mode

Edit Mode

After Update

Files

• profile.html - Structure with semantic markup
• profile.css - Responsive layout, gradient background, keyframe animations
• profile.js - Profile class with validation and state management
• PROFILE_README.md - Usage documentation

Security

CodeQL scan clean. Uses textContent for DOM updates (XSS prevention), validates all user inputs, handles edge cases (empty strings, malformed JSON, missing elements).

Original prompt

New task

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.