Difficulty-Based Stats & Profile Visualization

[narmesh]

To make CSSBattle more engaging and progression-based (similar to how LeetCode does it for coders), I propose the following enhancements:

1. Design Difficulty Levels:

- Each battle/challenge can be marked as Easy, Medium, or Hard based on factors like:
    - Number of tags required
    - Use of complex CSS properties (e.g. clip-path, gradients, animations)
    - Accuracy rate across players
    - Average time to complete
- Community voting or admin curation can finalize these difficulty tags.

2. Progress Graph in User Profiles:

- Display a bar/line chart in each profile showing how many easy, medium, and hard designs a user has solved. 
- Optionally, show historical progression (e.g. which months they tackled harder designs).

3. Battle Filter by Difficulty:

- Allow users to filter past and ongoing challenges based on difficulty level — great for beginners to start small and advanced users to test skills.

4. Difficulty Badges & Achievements:

- Award badges for milestones like:
    **- “Master of Easy”
    - “Medium Crusher”
    - “Hardcore Designer”
    - “All-Rounder”**

5. Performance Heatmap:

- Like GitHub and LeetCode streaks, show a contribution calendar-style heatmap showing how frequently a user participates in battles, with darker shades for higher scores or more difficult challenges solved.

[chinchang]

Great suggestions @narmesh !! Noted them all and will surely evaluate these. Thanks 🙌🏼

[narmesh]

Glad to be helpful❤️